vue3使用

setup中声明的变量不在实例vm和$data中

// 官网的一段代码
const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

使用setup

// App.vue中
const msg = ref('test');

// main.js中
console.log(vm.$data.msg) // => undefined
console.log(vm.msg)       // => undefined

// 可使用defineExpose 将其暴露出去
defineExpose({
  msg
})

template只有在v-if v-for时才能使用

<template>
  <h1>Test</h1>
  <template v-if="show">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, ducimus
      deleniti aut consequatur reprehenderit perferendis quaerat autem facere
      error, voluptatum porro dolorum laudantium sed, veritatis placeat ipsam
      quasi nulla hic?
    </p>
  </template>
</template>

<!-- 可以正常显示隐藏 -->

<template>
  <h1>Test</h1>
  <template v-show="show">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, ducimus
      deleniti aut consequatur reprehenderit perferendis quaerat autem facere
      error, voluptatum porro dolorum laudantium sed, veritatis placeat ipsam
      quasi nulla hic?
    </p>
  </template>
</template>

<!-- 无法显示, template被渲染成html标签 -->

<template>
  <h1>Test</h1>
  <template>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, ducimus
      deleniti aut consequatur reprehenderit perferendis quaerat autem facere
      error, voluptatum porro dolorum laudantium sed, veritatis placeat ipsam
      quasi nulla hic?
    </p>
  </template>
</template>

<!-- 无法显示,template被渲染成html标签 -->

列表渲染filter使用computed或method过滤

<li v-for="n in evenNumbers" :key="n">{{ n }}</li>

data() {
  return {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(number => number % 2 === 0)
  }
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)" :key="n">{{ n }}</li>
</ul>

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

监听子组件事件emit

// setup 声明
const emit = defineEmits(['test']);

// 触发
emit('test', 1, 2);
emit('test', { arg1: 1, arg2: 2 });

<!-- 父组件监听 -->
<!-- 接收一个参数 -->
<child @test="test($event)"></child>

<!-- 接收二个参数 -->
<child @test="test($event1, $event2)"></child>

<!-- 接收多个参数 -->
<child @test="test(...args))"></child>

一个对象的所有属性都作为prop传入组件

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

prop验证

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

验证抛出的事件

app.component('custom-form', {
  emits: {
    // 没有验证
    click: null,

    // 验证 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
})

生命周期