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支持异步

 

　　

posted on 2019-09-30 16:43  朝颜陌  阅读(291)  评论(0)    收藏  举报

导航