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
