Vue3学习笔记（二）

1.setup内的ref用法

处理基本类型或对象

let name = ref（'张三'）  双向绑定时改变name.value 

return {name}

ref内可以传对象

let obj = ref({

type:'a'

})

obj.value.type='b'

处理对象时使用Proxy

2.reactive

处理对象

let obj = reactive({

type:'a'

})

修改属性时不需要带value字段，直接obj.type = 'b'

对于数组对象，可以直接修改索引值修改    let array = reactive(["1","2","3"])     array[0] = "4"

3.vue2响应式缺点

新增属性删除属性，页面不刷新

通过下标修改数组，页面不刷新

4.vue3响应式原理:proxy

通过代理监测属性变化，增删改查，通过reflect进行相关操作

5.setup生命周期

setup执行比beforeCreate早，且内部this为undefined。

 setup参数：props（外部传参），context（上下文）

context属性，可以调用emit方法 

注意只能使用v-slot

 6.computed

计算属性，使用方法跟vue2类似 

第一种表示方式

 let job = reactive({
      name:"工程师",
      salary:"20k"
    })
    job.intro = computed(
      ()=>{
 return job.name+job.salary
      }
     
    )
 

　　第二种

let job = reactive({
      name:"工程师",
      salary:"20k"
    })
    job.intro = computed({
get(){
return job.name+job.salary
},
set(value){
    return job.value //返回工程师20k
}
})

　7.watch

watch监听reactive响应式数据，无法获得oldValue

deep：false无法强制关闭深度监视，监视深度属性时需要开启

传参：第一个参数可以是函数，用来监听对象属性，xx.xx

多个对象同时监听需要添加数组，[a,b],对于对象属性需要[()=>{a},()=>{b}]

8.watchEffect

初始化执行一次收集依赖，

不用指名监视哪个属性，依赖变化进行执行