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

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

}

}

}

[]( )计算属性与监视

==========================================================================



[]( )computed函数:

------------------------------------------------------------------------------



1.  与computed配置功能一致

2.  有getter/setter



[]( )与watch配置功能一致

-------------------------------------------------------------------------------



1.  监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调

2.  默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

3.  通过配置deep为true, 来指定深度监视



[]( )watchEffect函数

--------------------------------------------------------------------------------



1.  不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据

2.  默认初始时就会执行第一次, 从而可以收集需要监视的数据

3.  监视数据发生变化时回调

计算属性与监视

<legend>姓名操作</legend>

姓氏：<input type="text" placeholder="输入姓氏" v-model="user.firstName"><br>

名字：<input type="text" placeholder="输入名字" v-model="user.lastName">

<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>