前言:

vue2 的问题: 自动无偏差的把所有数据项都改为监听器 -- 消耗资源

vue3: 把自动改手动 -- 人为判断给哪些属性加监听器

ref: 给单个值添加监听

reactive: 利用 proxy 给对象类型加监听

toRefs: 把 proxy 转为多个 ref 组成的对象

vue2 : 属于选项式编程 - vue对象本身携带着所有的功能, 用户只需要通过选项来开启功能即可;

vue3: 兼容vue2的所有语法 -- 为了用户过渡方便

-- 额外增加组合式语法 composition, 把功能模块化, 用户需要什么功能, 就临时单独引入什么功能

setup

setup:安装,设置 -- 数据

vue3中一个新的配置项, 值为一个函数

vue2中的 data watch methods computed 都放在这里生成

setup函数的两种返回值:

若返回一个对象, 则对象中的属性与方法, 在模板中均可直接使用
若返回一个渲染函数: 则可以自定义渲染内容

<script lang="ts">
export default defineComponent({

setup() {
    let xx = xxx
    function xxx(){}
 },
})
</script>

ref

在vue3中ref函数的作用是定义一个响应式的数据

语法: let xx = ref(initValue)

<script>
  import {ref} from 'vue'
  export default {
    name: 'App',
    setup(){
      let name = ref('张三')
      let age = ref(18)

      function changeInfo(){
        name.value = '李四'
        age.value = 20
      } 

      // 返回一个对象(常用)
      return {
        name,
        age,
        changeInfo,
      }
    }
  }
</script>

需要用到响应式的数据要用ref包裹了(前提是要提前引入ref), 在JS中操作数据: xxx.value

在模板中读取数据的时候: 不需要.value, 直接: <h1>{ {xxx}}</h1>

注意:

接收的数据可以是: 基本类型, 也可以是对象类型
基本类型的数据: 响应式依然是靠Object.defineProperty()中的get与set完成的
对象类型的数据: 内部"求助"了Vue3中的一个新函数 ------ reactive函数

reactive函数

作用: 定义一个对象类型的响应式数据(基本类型不要用它, 要用ref函数)

使用方法: let 代理对象 = reactive(源对象)接收一个对象(或数组), 返回一个代理对象(proxy对象)

reactive定义的响应式数据是"深层次的"

内部基于ES6的Proxy实现, 通过代理对象操作源对象内部数据进行操作

使用reactive函数是不需要.value来读取的

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{
   
   {data.name}}</h2>
  <h2>年龄:{
   
   {data.age}}</h2>
  <h3>工作种类:{
   
   {data.job.type}}</h3>
  <h3>工作薪水:{
   
   {data.job.salary}}</h3>
  <h3>爱好:{
   
   {data.hobby}}</h3>
  <h3>测试的数据:{
   
   {data.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
  import {ref,reactive} from 'vue'
  export default {
    name: 'App',
    setup(){
      let data = reactive({
        name:'张三',
        age:18,
        job:{
          type:'前端工程师',
          salary:'30k',
          a:{
            b:{
              c:666
            }
          }
        },
        hobby:['抽烟','喝酒','烫头']
      })

      function changeInfo(){
        // name = '李四'
        // age = 20
        data.name = '李四'
        data.age = 20
        data.job.type = 'Java工程师'
        data.job.salary = '60k'
        data.job.a.b.c = 999
        data.hobby[0] = '学习'
      } 

      // 返回一个对象(常用)
      return {
        data,
        changeInfo
      }
    }
  }
</script>

下一节介绍一下Vue3中的响应式原理

Vue3关于setup、ref、reactive属性

setup

ref

reactive函数

猜你喜欢