vue中computed计算属性

作者：我家小花儿 | 2024-05-24 07:05:57

踩

vue中computed计算属性

computed计算属性

规则：

1.使用已有的属性来计算不存在的属性

2.默认调用一次get

3.简写形式（函数）没有set方法，如果需要更改值必须使用对象写法，不能使用函数

4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})

watch监听属性

规则

1.监听已有的属性

2.immediate设置为true默认触发一次，false不会默认触发

3.handler(新值,旧值)函数，当监听值发生改变时就会触发handler函数

4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})

5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true

6.简写，只有handler函数，才可以简写。写法：监听的属性名(新值,旧值){}

computed与watch

1.computed能做到的watch都可以，watch能做到的computed不一定能

2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select name="" id="" v-model="abc">
            <option :value="index" v-for="(item,index) of dataList" :key="index+item">
                {{item}}
            </option>
        </select>
        <select name="" id="">
            <option value="" v-for="(item,index) of baseList[abc]" :key="index+item">
                {{item}}
            </option>
        </select>
        <hr>
        <div>
            <h1>今天天气{{info}}</h1>
            <h2>{{userName}}</h2>
            <h3>{{obj.id}}</h3>
            <button @click="func()">点击切换天气</button>
 
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                // abc:"1",
                dataList:["江西省","湖南省","广东省"],
                baseList:[
                    ["南昌市","宜春市","赣州市","上饶市"],
                    ["长沙市","株洲市","怀化市"],
                    ["广州市","深圳市","潮汕市"],
                ],
                bool:true,
                userName:"",
                obj:{
                    id:99
                }
            }
        },
        // computed计算属性
        // 规则：
        // 1.使用已有的属性来计算不存在的属性
        // 2.默认调用一次get
        // 3.简写形式（函数）没有set方法，如果需要更改值必须使用对象写法，不能使用函数
        // 4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})
        computed:{
            info(){
                return this.bool?"炎热":"凉爽";
            },
            // abc:{
            //     get(){
            //         console.log("触发了get");
            //         return 2;
            //     },  
            //     set(value){
            //         console.log("触发了set");
            //         console.log(value);
            //     }
            // },
            abc(){
                console.log("触发了get");
                return 1;
            }
        },
        // watch监听属性
        // 规则
        // 1.监听已有的属性
        // 2.immediate设置为true默认触发一次，false不会默认触发
        // 3.handler(新值,旧值)函数，当监听值发生改变时就会触发handler函数
        // 4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})
        // 5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true
        // 6.简写，只有handler函数，才可以简写。写法：监听的属性名(新值,旧值){}
        watch:{
            bool:{
                immediate:false,
                handler(newValue,oldValue){
                    console.log(newValue);
                    console.log(oldValue);
                    console.log(this);
                    if(newValue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },
            // obj:{
            //     immediate:false,
            //     deep:true,
            //     handler(newValue,oldValue){
            //         console.log(newValue);
            //         console.log(oldValue);
            //     }
            // },
            // bool(newValue,oldValue){
            //     console.log(newValue);
            //     console.log(oldValue);
            //     console.log(this);
            // }
        },
        directives:{
 
        },
        methods: {
            func(){
                this.bool = !this.bool;
            }
        },
    })
    // vm.$watch("userName",{
    //     immediate:true,
    //     handler(newValue,oldValue){
    //         console.log("---------------------");
    //         console.log(newValue);
    //         console.log(oldValue);
    //         console.log(this);
    //     }
    // })
    vm.$watch("userName",function(newValue,oldValue){
        console.log("---------------------");
        console.log(newValue);
        console.log(oldValue);
        console.log(this);
    })
    // computed与watch
    // 1.computed能做到的watch都可以，watch能做到的computed不一定能
    // 2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，
</script>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/616346