vue基础----修饰符，watch,computed,method实例方法
作者：互联网
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支持异步
标签：vue,bar,computed,getInfo,修饰符,watch,getInfo1,foo 来源： https://www.cnblogs.com/moon-yyl/p/11613345.html