1.vue常用的修饰符，number,trim,number--->当作数字，trim-->去掉前后空格
2.methods与计算属性 computed 的相同与区别
1 <body> 2 <div id="app"> 3 {{getInfo()}} 4 {{getInfo1}} 5 </div> 6 <script src="./node_modules/vue/dist/vue.js"></script> 7 <script> 8 let vm = new Vue({ 9 data:{ 10 foo: "hello ", 11 bar: "world" 12 }, 13 // 方法不会缓存 在模板中调用需要用getInfo() 14 methods: { 15 getInfo() { 16 console.log("getInfo is called"); 17 return this.foo + this.bar; 18 } 19 }, 20 // 计算属性 本质上是一个方法 使用时候当作属性来用 21 /* 计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行*/ 22 computed: { // Obejct.defineProperty() 23 getInfo1() { 24 console.log("getInfo1 is called"); 25 return this.foo + this.bar; 26 } 27 } 28 }).$mount("#app"); 29 30 /*输出 31 getInfo is called 32 getInfo1 is called 33 */ 34 </script> 35 </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支持异步