Vue--计算属性与监视属性

最新推荐文章于 2024-06-19 20:53:45 发布

码码姑娘

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量189

点赞数

分类专栏：小白的前端开发学习之路文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/qq_45204129/article/details/121511950

版权

小白的前端开发学习之路专栏收录该内容

20 篇文章 0 订阅

订阅专栏

vue认为data中的写的都是属性

计算属性：拿着属性去进行加工

配置项：computed

<body>

    <div id="root">
       姓：<input type="text" name="" id="" v-model="surname">
       <br>
       名: <input type="text" name="" id="" v-model="name">
       <br>
       姓名：<span>{{fullname}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            surname:'张',
            name:'三',
        },
        // methods:{
        //     fullname(){
        //         return this.surname+this.name;
        //     }
        // }
        computed:{
            //fullname就是一个属性
            fullname:{
                //get什么时候调用： 初次读取fullname时；所依赖的值发生变化。
                get(){
                    //这里this就是vm
                    return this.surname + this.name;
                },
                //fullna被修改的时候
                set(value){
                    const arr = value.split('-');
                    this.surname = arr[0];
                    this.name = arr[1] ;
                }
            }
        }
    })

methods和computed的区别：

①、methods不会进行缓存，如果多次使用会调用多次。

计算属性会进行缓存，如果多次使用，计算属性只会调用一次，所依赖的值发生变化才会再次调用。效率比较高。

②、methods是函数调用，computed是属性调用

③、computed定义的方法是以属性访问的形式调用的【其中实现的原理是get方法】，methods定义的方法是以函数访问的形式调用的。

④、computed是基于响应式依赖进行缓存的，只有响应式依赖发生改变时，才会重新求值

如果这个计算属性只考虑读取，只有get的的方法就可以简写为fullname:{

                fullName(){
                    
                    return this.surname + this.name;
                },

例子：

<body>
    <div id="root">
        <h2>weathher is {{info}}</h2>
        <button @click="changeWeather">改变天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            ishot: true,
        },
        computed: {
            info(){
                return this.ishot ? "热" : "不热"
            }
        },
        methods: {
            changeWeather(){
                this.ishot = !this.ishot
            }
            
        },
    })

</script>

监视属性

watch: {
            ishot:{
                handler(newValue, oldValue){
                    console.log(newValue, oldValue)

                }
            }
        },
        
 或者是使用：
 vm.$watch('ishot',{
 	handler(newValue, oldValue){
        console.log(newValue, oldValue)

    }
 })

刚刚的使用计算属性的全名也可以使用监视属性

<body>

    <div id="root">
       姓：<input type="text" name="" id="" v-model="surname">
       <br>
       名: <input type="text" name="" id="" v-model="name">
       <br>
       姓名：<span>{{fullname}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            surname:'张',
            name:'三',
            fullname:''
        },
        watch: {
           surname:{
                handler(newValue){
                    this.fullname = newValue + this.name
                }               
            },
            name:{
                handler(newValue){
                    this.fullname = this.surname + newValue
                }  
            }
            
        },
        // methods:{
        //     fullname(){
        //         return this.surname+this.name;
        //     }
        // }
        // computed:{
        //     //fullname就是一个属性
        //     fullname:{
        //         //get什么时候调用： 初次读取fullname时；所依赖的值发生变化。
        //         get(){
        //             //这里this就是vm
        //             return this.surname + this.name;
        //         },
        //         //fullna被修改的时候
        //         set(value){
        //             const arr = value.split('-');
        //             this.surname = arr[0];
        //             this.name = arr[1] ;
        //         }
        //     }
        // },
    })

总结：这里去使用了三种方式来实现进行将姓名继续拼接，如果是需要一些异步操作的时候使用watch会比较好。

①、computed能完成的，watch都可以完成

②、watch能完成的，computed不一定能完成，比如说watch进行异步操作

③、所有被vue管理的函数都写成普通函数，这样this的指向才是 vm 或者是组件实例对象

④、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数），最好写成箭头函数，这样this才指向的是 vm 或者是组件实例对象。

码码姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--计算属性与监视属性

vue认为data中的写的都是属性计算属性：拿着属性去进行加工配置项：computed<body> <div id="root"> 姓：<input type="text" name="" id="" v-model="surname"> <br> 名: <input type="text" name="" id="" v-model="name"> <br>
复制链接

扫一扫