您当前的位置: 首页 > 技术文章 > 前端开发

vue3-3-响应式数据与watch属性

作者: 时间:2022-05-24阅读数: 人阅读

reactive与ref-细节

  1. 是Vue3的 composition API中2个最重要的响应式API
  2. ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
  3. 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
  4. ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
  5. reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
  6. ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
<template>
  <div>ref与</div>
  <div>msg1:{{msg1}}</div>
  <div>msg2:{{msg2}}</div>
  <div>msg3:{{msg3}}</div>
  <button @click="updata">改变</button>
</template>

<script lang="ts">
import {reactive, ref} from "vue";
export default {
  setup(){
    const msg1=ref('hello')
    const msg2 = reactive({
      name: 'jack',
      wife: {
        name:'rose'
      }
    })
    const msg3 = ref({ // ref中如果是一个对象,那么经过了reactive处理,形成了Proxy对象
      name: 'jack',
      wife: {
        name: 'rose'
      }
    })
    function updata(){
      msg1.value += '++'
      msg2.wife.name += '++'
      msg3.value.wife.name += '++'
    }
    return {
      msg1,
      msg2,
      msg3,
      updata
    }
  }
}
</script>

计算属性与监视

computed函数:

  1. 与computed配置功能一致
  2. 有getter/setter

与watch配置功能一致

  1. 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  2. 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  3. 通过配置deep为true, 来指定深度监视

watchEffect函数

  1. 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  2. 默认初始时就会执行第一次, 从而可以收集需要监视的数据
  3. 监视数据发生变化时回调
<template>
  <h1>计算属性与监视</h1>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏:<input type="text" placeholder="输入姓氏" v-model="user.firstName"><br>
    名字:<input type="text" placeholder="输入名字" v-model="user.lastName">
  </fieldset>
  <fieldset>
    <legend>计算属性和监视</legend>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName1"><br>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName2"><br>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName3"><br>
  </fieldset>
</template>

<script lang="ts">
import {reactive, ref, computed, watch, watchEffect} from "vue";
export default {
  setup() {
    const user=reactive({
      firstName:'东方',
      lastName: '不败'
    })
    /*
    * Vue3中的计算属性
    * 计算属性如果只传入一个回调函数,那么表示get
    * 返回的是一个ref对象
    * */
    const fullName1=computed(()=>{
      return user.firstName + '-' + user.lastName
    })
    const fullName2=computed({
      get(){
        return user.firstName + '-' + user.lastName
      },
      set(val){
        const name=val.split('-')
        user.firstName=name[0]
        user.lastName=name[1]
      }
    })
    // 监视属性
    let fullName3=ref('')
    watch(user,({firstName,lastName})=>{ // user里面对象解构赋值
      fullName3.value=firstName + '-' +lastName
    },{immediate:true}) // immediate 开始时执行一次 还可以加deep 深度监视
    // watchEffect(()=>{
    //   fullName3.value=user.firstName + '-' +user.lastName
    // }) // 更智能,开始就自动执行一次

    /*
    * wathc可以监视多个属性,监听非响应式数据时,需要()=>
    * */
    watch([()=>user.firstName,()=>user.lastName],()=>{
      console.log("watch执行了")
    })
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
}
</script>

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦

天猫38节现货-全屋智能