1. Vite 命令
  2. $ npm init vite-app 
  3. $ yarn create vite-app 
  4. 等价于
  5. $ yarn global add create-vite-app 然后cva  
  6. 等价于
  7. $ npx createa-vite-app  
  8. //或
  9. $ pnpm create vite <project-name> -- --template vue

Setup()

  • setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。 setup 函数会在 beforeCreate 之后、created 之前执行。
  • setup是一个新的组件选项，也是其他API的入口。 所有的操作都将在setup函数内部定义和执行， Vue3.0也将用函数代替Vue2.x的类也就是new Vue()
  • setup 函数中的第一个参数是 props 参数。setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。
  • 传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件 property。
    1. // MyBook.vue
    2. export default {
    3. setup(props, context) {
    4.   // Attribute (响应式 object)
    5.   console.log(context.attrs)
    6.   // Slots (响应式 object)
    7.   console.log(context.slots)
    8.   // Emit 事件 (方法)
    9.   console.log(context.emit)
    10. }
    11. }

Ref()

ref是Composition API 引入的新概念。作用是使访问响应式的变量不依赖于实例的this。如果使用了ref，我们访问响应式的变量时使用.value而不是从this中获取,其底层是采用reactive方法实现。
ref 会返回一个可变的响应式对象，该对象作为它的内部值——一个*响应式的引用，这就是名称的来源。此对象只包含一个名为 value 的 property` ：

  1. import { ref } from 'vue'
  3. const count = ref(0)
  4. console.log(count.value) // 0
  6. count.value++
  7. console.log(count.value) // 1

v-model文档

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

  1. <ChildComponent v-model="pageTitle" />
  3. <!-- 简写: -->
  5. <ChildComponent
  6.   :modelValue="pageTitle"
  7.   @update:modelValue="pageTitle = $event"
  8. />

$event 的值是 emit 的第二个参数
emit(事件名, 事件参数)

  1. <Switch :value="y" @update:value="y = $event"/>
  2. 可以简写为
  3. <Switch v-model:value="y" />
  5. ------------
  7.   setuop(props,context){
  8.       const toggle = () => {
  9.       context.emit('init', !props.value)
  10.     }
  11.     return {toggle}
  12. }

Vue 3 属性绑定

默认所有属性都绑定到根元素
使用 inheritAttrs: false 可以取消默认绑定
使用 $attrs 或者 context.attrs 获取所有属性
使用 v-bind=”$attrs” 批量绑定属性
使用 const {yyy, xxx, …rest} = context.attrs 将属性分开

props V.S. attrs

props 要先声明才能取值，attrs 不用先声明
props 不包含事件，attrs 包含
props 没有声明的属性，会跑到 attrs 里
props 支持 string 以外的类型，attrs 只有 string 类型

onMount 和 onUpdate 可以用 watchEffect代替

  1. const count = ref(0)
  2. watchEffect(() => console.log(count.value))
  3. // -> logs 0
  4. setTimeout(() => {
  5.   count.value++
  6.   // -> logs 1
  7. }, 100)

如果在onMounted之前不更新可以用onMounted套起来

  1. onMounted(() => {
  2.   watchEffect(() => {
  3.     // access the DOM or template refs
  4.   })
  5. })

Vue 2 和 Vue 3 的小区别

  • Vue 3 的 Template 支持多个根标签，Vue 2 不支持
  • Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
  • createApp(组件)，new Vue({template, render})
  • 新 v-model 代替以前的 v-model 和 .sync 新增
  • context.emit（setup里使用），与 this.$emit 作用相同（methods里写）