Vue--》setup、ref、reactive函数使用讲解

目录

setup

ref函数

reactive函数

Vue3中的响应式原理

---

setup

Vue3中的一个新的配置项值为一个函数。组件中所用到的数据、方法等等均要配置在setup中。setup函数的两种返回值如下

若返回一个对象则对象中的属性、方法、在模板中均可以直接使用。

<template>
  <div>
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }} </h2> 
  </div>
  <button @click="say">say</button>
</template>
<script>
export default {
  name:'MyApp',
  setup(){
    let name = '张三'
    let age = 18

    function say(){
      let str = `我的名字是${name},我的年龄是${age}`
      alert('hello workd'+str);
    }
    // 返回一个对象
    return {
      name,age,say
    }
  }
}
</script>

若返回一个渲染函数则可以自定义渲染内容。

<script>
import {h} from 'vue'
export default {
  name:'MyApp',
  setup(){
    // 返回一个函数渲染函数
    return ()=> h('h1','渲染函数')
  }
}
</script>

<template>
  <div>
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }} </h2>
    <h2>性别{{ sex }} </h2>
    <h2>身高{{ height }} </h2>
  </div>
  <button @click="showData">Vue2中打印showData</button><br><br>
  <button @click="showSetup">Vue3中打印showSetup</button>
</template>
<script>
export default {
  name: 'MyApp',
  // data能与setup进行搭配使用
  data () {
    return {
      sex: '男',
      height: '175'
    }
  },
  methods:{
    // Vue2中能访问到Vue3中的数据
    showData(){
      console.log('打印data数据里能访问到的数据');
      console.log(this.sex);
      console.log(this.height);
      console.log(this.name);
      console.log(this.age);
    }
  },
  setup () {
    let name = '张三'
    let age = 18
    // Vue3中不能访问到Vue2中的数据
    function showSetup () {
      console.log('打印setup数据里能访问到的数据');
      console.log(name);
      console.log(age);
      console.log(this.sex);
      console.log(this.height);
    }
    // 返回一个对象
    return {
      name, age, showSetup
    }
  }
}
</script>

注意

1尽量不要与Vue2.x配合使用

Vue2.x配置(data、methods、computed...)中可以访问到setup中的属性和方法但在setup中不能访问到Vue2.x配置(data、methods、computed...)如果有重名setup优先。

2setup不能是一个async函数因为返回值不再是return的对象而是promise模板看不到return对象中的属性。

3setup执行的时机

在beforeCreate之前执行一次this是undefined。

4setup的参数

props:值为对象包含:组件外部传递过来且组件内部声明接收了的属性。

context: 上下文对象

attrs:值为对象包含:组件外部传递过来但没有在props配置中声明的属性,相当this.$attrs

slots:收到的插槽内容,相当于this.$slots

emit:分发自定义事件的函数,相当于this.$emit

ref函数

定义一个响应式的数据其语法为const xxx = ref(initValue)。创建一个包含响应式数据的引用对象在JS中操作数据为 xxx.value而在模板中读取数据不需要 .value直接<div>{{xxx}}</div>

<template>
  <div>
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }} </h2>
    <h2>工作{{ obj.type }}</h2>
    <h2>薪资{{ obj.salary }}</h2>
  </div>
  <button @click="change">修改信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'MyApp',
  setup () {
    // 数据
    const name = ref('张三')
    const age = ref(18)
    const obj = ref({
      type:'前端工程师',
      salary:'30k'
    })
    // 修改信息函数
    function change(){
      name.value = '李四'
      age.value = 20
      obj.value.type = 'UI工程师'
      obj.value.salary = '20k'
    }
    // 返回一个对象
    return {
      name,age,obj,change
    }
  }
}
</script>

注意

接收的数据可以是基本类型、也可以是对象类型。

基本类型的数据响应式依然是靠Object.defineProperty()的get和set完成的。

对象类型的数据内部求助了Vue3的一个新函数——reactive函数

reactive函数

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

<template>
  <div>
    <h2>姓名{{ person.name }}</h2>
    <h2>年龄{{ person.age }} </h2>
    <h2>工作{{ person.job.type }}</h2>
    <h2>薪资{{ person.job.salary }}</h2>
    <h2>爱好{{ person.hobby }}</h2>
  </div>
  <button @click="change">修改信息</button>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'MyApp',
  setup () {
    // 数据
    const person = reactive({
      name:'张三',
      age:18,
      job:{
        type:'前端工程师',
        salary:'30k'
      },
      hobby:['抽烟','喝酒','烫头']
    })
    // 修改信息函数
    function change(){
      person.name = '李四'
      person.age = 20
      person.job.type = 'UI工程师'
      person.job.salary = '20k'
      person.hobby[0]='学习'
    }
    // 返回一个对象
    return {
      person,change
    }
  }
}
</script>

reactive和ref的对比

从定义数据角度对比:

ref用来定义:基本类型数据。

reactive用来定义:对象或数组)类型数据。

备注: ref也可以用来定义对象或数组类型数据,它内部会自动通过reactive转为代理对象

从原理角度对比:

ref通过 object.defineProperty()的get与set来实现响应式(数据劫持)。

reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

从使用角度对比

ref定义的数据:操作数据需要.value读取数据时模板中直接读取不需要.value

reactive定义的数据:操作数据与读取数据:均不需要.value。

Vue3中的响应式原理

在Vue2.x的响应式中其实现原理为

对象类型通过object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

数组类型通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。

object.fineProperty(data,'count',{
    get(){},
    set(){}
})

存在问题

新增属性、删除属性页面不会更新。

直接通过下标修改数组界面不会自动更新。

<template>
  <div>
    <h2 v-show="person.name">姓名{{person.name}}</h2>
    <h2>年龄{{person.age}}</h2>
    <h2 v-show="person.sex">性别{{person.sex}}</h2>
    <button @click="addSex">添加性别</button>
    <button @click="delName">删除姓名</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'MyApp',
  data(){
    return {
      person:{
        name:'张三',
        age:18,
      }
    }
  },
  methods:{
    addSex(){
      // this.$set(this.person,'sex','女')
      // 也可以用如下方式
      Vue.set(this.person,'sex','女')
    },
    delName(){
      this.$delete(this.person,'name')
    }
  }
}
</script>

在Vue3.x的响应式中其实现原理为

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

通过Reflect反射对被代理对象的属性进行操作。