vue3.0

Composition API(常用部分)

1、setup和ref

1.1、setup

执行时机: setup 代替了之前vue2的 beforeCreate 和 created 钩子,最早执行的钩子(比beforeCreate 还早)
特点: 在setup当中获取不到this
说明: [以后]所有页面中用到的东西都写在setup这个钩子中return出去

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

1.2、 ref

  1. 页面中使用的数据需要用ref包裹一下,变成一个响应式对象,然后return出去
  2. 在页面中使用这个数据的时候直接 在插值语法中写这个数据即可,页面中自动会展示这个对象的.value属性
  3. 在js中修改ref包裹的数据的时候,需要.value取修改
  • 作用: 定义一个数据的响应式
  • 语法: const xxx = ref(initValue):
    • 创建一个包含响应式数据的引用(reference)对象
  • js中操作数据: xxx.value
  • 模板中操作数据: 不需要.value
    一般用来定义一个基本类型的响应式数据

2、reactive

  • 作用: 定义多个数据的响应式
  • const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象(递归深度响应式)
  • 响应式转换是“深层的”:会影响对象内部所有嵌套的属性
  • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的

obj是元对象、reactive代理、obj1是代理对象

const obj = {
    name: '张三'
}

const obj1 = reactive(obj);

元对象经过 代理 生成了一个代理对象

代理对象是有响应式的,元对象没有

元对象修改的时候拦截不到设置值和获取值,代理对象在设置值和获取值的时候可以拦截到更新页面

修改代理对象本质上还是在修改元对象

3、ref和reactive区别

问题: ref和reactive都是把数据变成响应式,有什么差别?(基本数据类型、引用数据类型)

不同点:

  1. ref可以用于基本数据类型,reactive不能用于基本数据类型
  2. 对于引用数据类型来说,ref.value就是reactive包裹之后的代理对象
    相当于ref包裹对象的时候,将对象交给reactive包裹,返回的proxy对象放在ref对象的value属性上
  3. 在js中使用的时候,ref对象需要.value, reactive直接修改属性即可
  4. ref对象.value属性改变的时候可以监测到,持有reactive对象的变量,修改地址之后,检测不到
  5. ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
    reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据

ref看着比reactive牛批

在js中书写的时候,修改对象的属性:

  • reactive的proxy对象直接写 proxy.属性 修改即可
  • ref对象修改属性的时候
    • ref.value.属性 可以修改
    • ref.value 可以放一个新的proxy对象

总结: 在js中 ref需要.value修改,reactive生成的proxy对象直接.属性修改即可

相同点:

  1. 都可以把引用数据类型变成响应式
  2. 在模板中使用的时候,都是直接使用

注意理解:当ref包裹一个对象的时候

4、setup拓展 - 看看就行,不用记

正儿八经不会掺和着一块使用 组合式API 和 选项式API,以后全部写在

你可能感兴趣的:(Vue,vue.js)