前言

若文章有误，欢迎读者留言反馈

vue3重点

  1. setup中书写咱们以前的methods，data,computed,watch,生命周期等都书写在setup中，
    setup在beforeCreate和created之间执行。
    setup中没有this这个vue实例，但是有context上下文。
  2. 状态和事件
    书写状态数据，一种方法在变量值外面用ref来包裹，实现了响应式，另一种方法使用reactive和toRefs来创建
    响应式对象数据。
    事件就熟悉函数表达式，然后return抛出，然后在模板使用即可。
  3. computed计算属性
    computed中放入回调函数，函数必须有返回值，并且其本质是数据。特性：缓存性，依赖性。
    computed中放入对象，对象有get和set方法，次数据就可以使用v-model双向绑定。
  4. 跨层级通信
    祖先组件通过 provide(key,value)方式给后代传递数据。
    后代组件通过inject(key)方式来注入数据，即可使用，注意:inject只读
    祖先组件数据进行更新，后代无条件同步数据，不管你是基本数据类型还是应用数据类型。
  5. 生命周期
    挂载阶段 setup onBeforeMount onMounted
    更新阶段 onBeforeUpdate onUpdated
    销毁阶段 onBeforeUnmount onUnmounted

计算属性【computed】

computed虽然是函数，但是本质是数据变量，特性：缓存性，依赖性
计算属性函数形式[计算属性的执行依赖于使用数据的改变，但是初始会获取一次所使用数据]

跨层级通信【provide—inject】

vue2中父组件更新，如果是基本数据类型，后代组件不更新，如果是对象，后代会更新。
vue3中父组件更新，后代无条件更新，不管是不是引用数据类型。

props、data、computed都是数据变量，不能重复，重复就会覆盖

inject 和 props是一样的，数据只读。不能直接修改它。单项数据流

响应式数据[ref和reactive]

ref 可用于任何类型的数据创建响应式，reactive只用于创建引用类型数据的响应式。
ref可用于任何类型的数据创建响应式【直接得到响应式变量】
reactive只用于创建引用数据类型的响应式【toRefs()是为了解构时保证属性具备响应式再抛出，在模板中直接使用响应式属性，如果直接抛出data，每次都需要data.属性】

toRefs:使解构后的数据重新获得响应式

  1. ref适用基本数据类型，模板中使用，直接在return中抛出，同时模板里面不需要.value,而在setup里面操作数据需要.value
  2. reactive适用复杂数据类型，模板中使用，需要将属性抛出，再在模板中使用，而在setup里面操作数据需要.属性
  3. 通信上面，传递的是proxy实例对象,props接收的proxy实例对象可以直接在模板中使用，但是setup里面操作这个数据需要通过参数props，包括emit，由于没有this也需要一个参数一般是context

响应式数据eg：

ref：可用于任何类型的数据创建响应式, 取值需要.value。对于基本类型，ref的性能优于reactive,而对于对象类型数据，ref是通过reactive包装实现的

1
2
3
4
5
6
7
8
setup() {
   const name = ref('小明')
   // 这里需要通过.value访问，模板中可直接使用name（vue内部会自动浅层次解析内部值）
   console.log(name.value)
   return {
     name
   }
}

reactive：只用于创建引用类型数据的响应式，取值不用加.value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setup() {
   const userInfo = reactive({
     name: '小明',
     age: 18
   })
   return {
     // 下面三种写法的区别
     // 1.通过toRefs解构userInfo的内容，模板使用直接name，使每个属性具备响应性。【最佳方案】
     ...toRefs(userInfo),
     // 2.直接return出去，模板中使用不能直接使用name需要userInfo.name，比较麻烦
     // userInfo,
     // 3.解构后，在模板中直接使用name,但是属性不再具有响应性
     // ...userInfo,
   }
}

toRef：复制 reactive里的单个属性并转成ref
toRefs：复制reactive里的所有属性并转成ref
toRefs和toRef功能是一致的，但是可以批量创建多个ref对象

toRef: 将对象中的属性单独变成响应式数据(就是只能控制对象中的一个属性给外部使用)

1
2
3
4
5
6
7
8
9
setup() {
   const userInfo = reactive({
     name: '小明',
     age: 18
   })
   return {
     name: toRef(userInfo, 'name')
   }
}

toRefs：使解构后的数据重新获得响应式

1
2
3
4
5
6
7
8
9
const userInfo = reactive({
   name: '小明',
   age: 18
})
const hello = ref('hello')
return {
   hello,
   ...toRefs(userInfo)
}

props和attrs【补充一个provide和inject】

  1. props和attrs都可以获取父组件的数据
  2. props接收的proxy实例对象可以直接在模板中使用，但是setup里面操作这个数据需要通过参数props；而attrs，在模板中使用需要解构var {num, arr} = context.attrs并抛出，方法可以context.attrs.fn()直接调用
  3. props可以获取父组件的所有数据，不包含函数，attrs可以获取函数
  4. props中出现的数据，attrs就不会出现，如果父给子传递数据，props没有接收，attrs就会接收，props接收，attrs就不接收，这两是互斥的[函数除外，props无法接收函数，但是attrs,所以也可以使用attrs接收函数来调用，两者可以搭配使用一个接收数据，一个接收函数来调用]。
  5. 父组件通过@+自定义事件方式传递函数给子组件，子组件通过context.attrs，on+自定义事件方式来触发它==emit【传递数据也是一样】
  6. provide都可以传递包括函数，inject接收return抛出，直接把函数名放到模板中使用，可以传递实参，provide相当于桥梁【限制条件是只能祖先传递孙子，不能孙子传递祖先】