vue属性学习

最新推荐文章于 2024-05-17 14:32:46 发布

kun_sl

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量302

点赞数 3

文章标签： vue.js 学习 okhttp

本文链接：https://blog.csdn.net/kun_sl/article/details/137264467

版权

computed 计算属性

定义:
需要通过已有属性计算得来
要用的属性不存在，
原理:底层借助了 0bjcet.defineproperty()方法提供的getter和 setter
get 函数什么时候执行?
a.初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
b.优势:与 methods 实现相比，
效率更高，
调试方便
内部有缓存机制(复用)
备注：
计算属性最终会出现在 vm 上，直接读取使用即可
a.如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变
b.如果计算属性确定不考虑修改，可以使用计算属性的简写形式

watch 监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性
3.配置项属性 immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
4.监视有两种写法
a.创建 Vue 时传入 watch:{}配置
b.通过 vm.$watch()监视

深度侦听

1.Vue 中的watch默认不监测对象内部值的改变(一层)
2.在 watch中配置deep:true，可以监测对象内部值的改变(多层)
注意：
Vue自身可以监测对象内部值的改变，但Vue 提供的 watch默认不可以
2.使用watch 时根据监视数据的具体结构，决定是否采用深度监视

计算属性 VS 侦听属性

computed和watch 之间的区别
1.computed 能完成的功能，watch 都可以完成。watch能完成的功能，computed不一定能完成，例如 watch 可以进行异步操作，computed做不到。
两个重要的小原则
所有被 vue 管理的函数，最好写成普通函数，这样 this的指向才是 vm或组件实例对
象
所有不被 vue 所管理的函数
(定时器的回调函数、ajax 的回调函数等,Promise 的回调函数)，最好写成箭头函数，这样 this的指向才是vm或组件实例对象。
计算属性和侦听属性的测试代码如下：

<!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">
        <div>
            <h1>今天的天气{{str}}</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 {
                bool:true,
                userName:"",
                obj:{
                    id:99,
                }
            }
        },
        methods: {
            func(){
                this.bool = !this.bool;
            }
        },
        computed:{
            str(){
                return this.bool?"炎热":"凉爽"
            }
        },
        watch:{
            obj:{
                immediate:false,
                deep:true,
                handler(newVlaue,oldValue){
                    console.log("--------obj-------");
                    console.log(newVlaue);
                    console.log(oldValue);
                }
            },
            bool:{
                immediate:true,
                handler(newVlaue,oldValue){
                    console.log(newVlaue);
                    console.log(oldValue);
                    if(newVlaue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },
            str(newVlaue,oldValue){
                console.log(newVlaue);
                console.log(oldValue);
                console.log(this);
            }
        },
        directives:{

        }
    })
    // vm.$watch("userName",{
    //     immediate:false,
    //     handler(newVlaue,oldValue){
    //         console.log("--------userName---------");
    //         console.log(newVlaue);
    //         console.log(oldValue);
    //         console.log(this);
    //     }
    // })
    vm.$watch("userName",function(newVlaue,oldValue){
            console.log("--------userName---------");
            console.log(newVlaue);
            console.log(oldValue);
            console.log(this);
            console.log(this.bool);
    })
</script>
</html>

kun_sl

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue属性学习

watch能完成的功能，computed不一定能完成，例如 watch 可以进行异步操作，computed做不到。(定时器的回调函数、ajax 的回调函数等,Promise 的回调函数)，最好写成箭头函数，这样 this的指向才是vm或组件实例对象。a.如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。2.监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。
复制链接

扫一扫