Vue3基础知识点

拉开序幕的setup

1. 理解：Vue3.0中的一个新的配置项，值为一个函数

2. setup是所有Composition API（组合API）
   的’表演舞台‘

3. 组件中所用到的：数据、方法等等，均要配置在setup中

4. setup函数的两种返回值：
   若返回一个对象，则对象中的属性、方法，在模板中均可直接使用（重点）
   若返回一个渲染函数：则可以自定义渲染内容（了解）

5. 注意点：
   1、尽量不要与Vue2.配置混用
   vue2.x配置（data、methos、compute…）中可以访问到setup中的属性，方法但在setup中不能访问到vue2.x配置（data、methos、compute…）
   如果有重名，setup优先
   2、setup 不能是一个async函数，因为返回值不再是一个return的对象，而是promise，模板看不到return对象中的属性（后期-也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

ref函数

• 作用：定义一个响应式的数据

• 语法：const xxx = ref (initValue)
  创建一个包含响应式数据的引用对象（reference对象），简称ref对象。
  JS中的操作数据：xxx.value
  模板中读取数据：不需要value，之间

  { {xxxx]}

• 备注：
  接受是数据可以是：基本类型，也可以是对象类型。
  基本类型的数据：响应式依然是靠Object.defineProoerty()的get与set完成的
  对象类型数据：内部”求助“了Vue3，中的一个新函数——reactive函数

reactive函数

• 作用：定义一个对象类型的响应数据（基本类型不要用它。要用ref函数）
• 语法：const 代理对象=reactive（源对象）接收一个对象（或数据），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是”深层次的“
• 内部基于ES6的Proxy实现，通过代理对象操作源内部数据进行操作

Vue.3.0中的响应式原理

vue2.x的响应式

• 实现原理：
  对象类型：通过Object.definePropertry()对属性的读取、修改进行拦截（数据劫持）
  数组类型：通过重新更新数组的一系列方法来实现拦截。（对数组的变更方法进行包裹）。

Object.definePropertry(data,'count',{
   
get(){
   },
set(){
   }
})

• 存在的问题：
  新增属性、删除属性界面不会更新
  之间通过下标修改数组，界面不会自动更新

Vue3的响应式

• 实现原理：
  通过Proxy（代理）：拦截对象中任意属性的变化，包含：属性值的读写、属性的添加、属性的删除等。
  通过Reflect（反射）：对被代理对象的属性进行操作。
  MON文档中描述的Proxy与Reflect

reactive对比ref

• 从定义的角度对比：
  ref 用来定义：基本数据。
  reactive用来定义：对象（或数组）l类型数据
  备注：ref也可以用来定义对象（或数组）类型数据，她内部会自动通过reactive转换为代理对象

• 从原理角度对比：
  ref通过Object.defineProperty()的get与set 来实现响应式（数据劫持）。
  reactive通过使用Proxy来实现响应式（数据劫持）并通过Reflect操作源对象内部的数据

• 从使用角度对比：
  ref定义的数据：操作数据需要.value读取数据时模板中直接读取不需要.value
  reactive定义数据：操作数据与读取数据：均不需要.value

计算属性与监视

• computed函数
  1、与Vue2.x中computed配置功能一致
  2、写法：

import {
    reactive,computed } from 'vue'
export default {
   
    name:'Demo',
    setup(){
       
       //数据
       let person = reactive({
   
           firstName:'张',
           lastName:'三'

       })
    //    //计算属性——简写（没有考虑计算属性被修改的情况）
       person.fullName= computed(()=>{
   
           return person.firstName+'-'+person.lastName
       })

    //  计算属性——完整写法（考虑读和写）
       person.fullName= computed({
   
           get(){
   
               return  person.firstName+'-'+person.lastName
            
           },
           set(value