vue之监听计算属性-watchcomputed
1.计算属性
在computed属性对象中定义计算属性的⽅法
在页⾯中使⽤{⽅法名}来显⽰计算的结果
2.监视属性
通过vm对象的$watch()或者watch配置来监视制定的属性
当属性变化时，回调函数⾃动调⽤，在函数内部进⾏计算
3.计算属性⾼级
通过getter/setter实现对属性数据的显⽰和监视
计算属性存在缓存，多次读取只执⾏⼀次getter计算
3.watch
immediate: true //该回调将会在侦听开始之后被⽴即调⽤
<!DOCTYPE html>
<html lang="en">
<head>
input标签placeholder属性<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myVue">
<div class="input1">
姓： <input type="text" placeholder="姓" v-model="name1">
</div>
<div class="input1">
名： <input type="text" placeholder="名" v-model="name2">
</div>
<div class="input1">
姓名（双向） <input type="text" placeholder="姓名（双向）" v-model="name5">
</div>
<div class="input1">
姓名（单向）- computed： <input type="text" placeholder="姓名（单向）- computed" v-model="name3">
</div>
<div class="input1">
姓名（单向）- watch <input type="text" placeholder="姓名（单向）- watch" v-model="name4">
</div>
<div class="input1">
姓名（单向）- watch-immediate <input type="text" placeholder="姓名（单向）- watch-immediate" v-model="name6">    </div>
</div>
<script src="cdn.bootcss/vue/2.6.10/vue.js"></script>
<!--
1.计算属性
在computed属性对象中定义计算属性的⽅法
在页⾯中使⽤{⽅法名}来显⽰计算的结果
2.监视属性
通过vm对象的$watch()或者watch配置来监视制定的属性
当属性变化时，回调函数⾃动调⽤，在函数内部进⾏计算
3.计算属性⾼级
通过getter/setter实现对属性数据的显⽰和监视
计算属性存在缓存，多次读取只执⾏⼀次getter计算
3.watch
immediate: true //该回调将会在侦听开始之后被⽴即调⽤
-->
<script>
const vm =  new Vue({
el: '#myVue',
data () {
return {
name1: '姓',
name2: '名',
name4: '',
name6: ''
}
},
computed: {
// 什么时候执⾏，初始化显⽰/相关的data属性数据发⽣改变
/
/ 计算并返回当前属性的值
name3 () { // 计算属性中的⼀个⽅法，⽅法的返回值作为属性值
return this.name1 + ' ' + this.name2
},
name5: {
// 1.你定义的，2 你没有调⽤ 3 但最终它执⾏了
// 1.什么时候调⽤？2 ⽤来做什么
// 回调函数当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值          get () {
return this.name1 + ' ' + this.name2
},
// 回调函数监视当前属性值的变化，当属性值发⽣改变时回调，更新相关的属性数据          set (v) { // v就是name的最新属性值
const val = v.split(' ')
this.name1 = val[0]
this.name2 = val[1]
}
}
},
watch: {
name1 (v) { // name2发⽣了变化
this.name4 = v + '' + this.name2
},
name1: {
handler (v) {
this.name6 = v + '' + this.name2
},
immediate: true //该回调将会在侦听开始之后被⽴即调⽤
}
}
})
vm.$watch('name2', (v) => {
this.name4 =this.name1 + '' + v
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。