1.vue常用的修饰符，number,trim,number--->当作数字，trim-->去掉前后空格
2.methods与计算属性 computed 的相同与区别
<body>
<div id="app">
{{getInfo()}}
{{getInfo1}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
foo: "hello ",
bar: "world"
},
// 方法不会缓存 在模板中调用需要用getInfo()
methods: {
getInfo() {
console.log("getInfo is called");
return this.foo + this.bar;
}
},
// 计算属性 本质上是一个方法 使用时候当作属性来用
/* 计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行*/
computed: { // Obejct.defineProperty()
getInfo1() {
console.log("getInfo1 is called");
return this.foo + this.bar;
}
}
}).$mount("#app"); /*输出
getInfo is called
getInfo1 is called
*/
</script>
</body
总结：computed本质上是一个方法，使用的时候当作属性来用，计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行，方法不会缓存，当作方法去调用。
3.watch vs computed
<body>
<div id="app">
{{getInfo1}}
{{getInfo}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
foo: "hello ",
bar: "world",
getInfo:""
},
// 计算属性 本质上是一个方法 使用时候当作属性来用
/* 计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行*/
computed: { // Obejct.defineProperty()
getInfo1() {
console.log("getInfo1 is called");
return this.foo + this.bar;
}
},
// watch vs computed
// 1 尽量优先使用computed 代码简洁
// 2 watch支持异步
watch: {
/*
foo(newValue,oldValue) {
this.getInfo = this.foo + this.bar;
},
bar(newValue,oldValue) {
this.getInfo = this.foo + this.bar;
}*/
foo:{
handler() {
setTimeout(()=>{
this.getInfo = this.foo + this.bar;
},1000);
},
immediate: true //立即执行,为false的时候第一次渲染不会出来，只有当数据改变的时候才会变
},
bar() {
this.getInfo = this.foo + this.bar;
}
}
}).$mount("#app");
</script>
</body>
总结：1 尽量优先使用computed 代码简洁
2 watch支持异步