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>