vue3 自学笔记

vue3中是如何实现响应式的

vue3 中实现响应式主要是通过es6 中的Proxy方法,那么Proxy有什么好处呢?对标Obeject.defineProtype()

我们尝试模拟一下Vue3中的响应式的运行方式

//模拟Vue3中的响应式原理
const Person = {
    name:"小王",
    gender:"男"
}
const p = new Proxy(Person,{
  //有人读取p某个属性的调用时
  get(target,propName){
      console.log(`有人读取了p身上的${propName}属性`)
      return target[propName]
  },
  //有人修改了p的某个属性,或者给p追加了某个属性时调用
  set(target,propName,value){
      console.log(`有人修改或者添加了p身上的${propName}属性`)
      return target[propName]=value
  },
  //有人删除了p的某个属性时调用
  deleteProperty(target,propName){
      console.log(`有人删除了p身上的${propName},我要去更新界面了`)
      return delete target[propName]
  }
  
})

实现原理:

通过Proxy(代理):拦截对象中任意属性的变化,包括属性值的读写,属性的添加,属性的删除等

通过Reflect(反射):对源对象的属性进行操作

Reflect.get(target,prop)
Reflect.set(target,prop,value)
Reflect.deleteProperty(target,prop)

watchEffect函数

watch 的套路是:既要指明监视的属性,也要指明监视的回调.
watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到了哪个属性,那就监视哪个属性
watchEffect有点像computed:
- watchEffect更注重的过程,所以不用写返回值
- 但是computed注重计算出来的值(回调函数的返回值),所以必须写返回值.

//watchEffect中所用到的数据只要发生变化,则重新执行回调
watchEffect(()=>{
    const x1 = sun.value
    const x2 = person.age
    console.log('watchEffect 配置的回调函数执行了')
})

setup 的基本情况

setup执行的时机
- 在before之前执行一次,this是underfined
context:上下文对象
- attrs：值为对象，包含：组件中外部储传递过来，但没有在props配置中声明的属性，相当于this.$attrs
- slots: 收到的插槽内容，相当于this.$slots.
- emit:、分发自定义事件的函数，相当于this.$emit

reactive 函数

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

ref 函数

作用：定义一个响应式数据
语法：const xxx = ref(initValue)
- 创建包含响应数据的引用对象
- js中操作数据：xxx.value
- 模板中读取数据：不需要.value,直接{{xxx}}
备注：
- 接受的数据可以是：基本数据类型、也可以是对象类型
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成
- 对象数据类型：内部求助了Vue3.0的一个新函数-----reactive函数

补充：删除对象中的某一个属性

delete person.name

s vue3 自学笔记

vue3 自学笔记

vue3中是如何实现响应式的

watchEffect函数

setup 的基本情况

reactive 函数

ref 函数