vue之笔记

最新推荐文章于 2024-07-25 07:30:00 发布

Yolo_YY

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量147

点赞数 1

文章标签： vue.js 笔记 okhttp

本文链接：https://blog.csdn.net/Yolo_YY/article/details/137264126

版权

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>

Yolo_YY

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue之笔记

两个重要的小原则所有被 vue 管理的函数，最好写成普通函数，这样 this的指向才是 vm或。计算属性最终会出现在 vm 上，直接读取使用即可 a.如果计算属性要被修改，那必须写 set 函数去响应修改，且 set。的回调函数)，最好写成箭头函数，这样 this的指向才是vm或组件实例对象。中要引起计算时依赖的数据发生改变 b.如果计算属性确定不考虑修改，可以使用计算属性的简写形式。2.监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性。当依赖的数据发生改变时会被再次调用。
复制链接

扫一扫