Vue 计算属性和监视属性

computed

computed 计算属性

规则：

• 用已有的属性计算不存在的属性
• 默认调用一次get()
• 只有值不发生改变的时候才可以使用简写（函数）；值发生改变 使用对象式写法，才可以配置set()方法
• 底层原理使用 object.definProperty(目标对象，键名，{})

<div id="app"><input type="text" v-model="fullName"><input type="text" v-model="Names"></div>

Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},computed: {//标准写法 对象式Names: {get() {console.log("get被调用了");return 99;},set(value) {console.log(value);console.log("set被调用了");}},//简写写法 函数式  没有set值fullName() {console.log("简写的计算方法触发");return 99;}}})

watch

watch 监视属性

规则：

• 监视已存在的属性
• mmediate:true 默认调用一次,false不会
• 只有handler方法可以简写;写法:监视的属性(新值,就值){}
• 监视对象中的值需要深度监视.使用deep:true

<div id="app"><h1>今天的天气{{weather}}</h1><h2>{{user}}</h2><h2>{{obj.id}}</h2><button @click="func()">切换天气</button></div>

 Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {bool: true,user: "",obj: {id: 99}}},methods: {func() {this.bool = !this.bool;}},computed: {weather() {return this.bool ? "炎热" : "凉爽";}},watch: {bool: {immediate: true,deep:true,handler(newValue, oldValue) {console.log('-------bool--------');console.log(newValue);console.log(oldValue);if (newValue== true) {this.user = "张三";} else {this.user = '李四'}}},obj: {immediate: true,deep: true, //开启深度监视handler(newValue, oldValue) {console.log('-------obj--------');console.log(newValue);console.log(oldValue);}}//简写// weather(newValue, oldValue) {//     console.log(newValue);//     console.log(oldValue);//     console.log(this);// }},})

这是watch的另一种写法 ,写在实例化之外

vm.$watch("user", {immediate: false,deep: false,handler(newValue, oldValue) {console.log(newValue);console.log(oldValue);console.log(this);}})

---

• 失联

最后编辑时间 2024，03，19；17：31