Vue属性监听

时间  2020-12-01
标签 html vue 面试 数组 app 函数 this spa code 栏目 HTML 繁體版
原文   原文链接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <input type="text" v-model.number="a"/>
        <input type="text" v-model.number="b"/>
        <p>之和:{{c}}</p> -->

        <input type="text" v-model="obj.name"/>
        <input type="text" v-model="obj.age"/>
        <input type="text" v-model="obj.sex">
        <hr>
        <button @click="handlepush()">增长</button>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({ el:"#app", data:{ a:"", b:"", c:"", obj:{ name:"zhangsan", age:19 }, arr:[10,20,30,40] }, computed:{}, beforeMount(){ // this.obj.sex="女"
            this.$set(this.obj,"sex","女") }, methods:{ handlepush(){ // this.arr.length = 0;
                // console.log(this.arr);

                // this.arr[0] = 100;
                // console.log(this.arr);

                this.$set(this.arr,0,100); } }, watch:{ // "obj.name"(newVal,oldVal){
            // console.log(newVal,oldVal)
            // },
            // "obj.age"(newVal,oldVal){
            // console.log(newVal,oldVal)
            // }
            // obj:{
            // handler(newVal){
            // console.log(newVal)
            // },
            // deep:true,
            // //当页面第一次加载的时候也会作监听
            // immediate:true
            // }
 arr(newVal){ console.log(newVal) } } }) /* 属性监听 watch:监听属性的变化 原理： 监听依赖的属性，当依赖的属性发生改变的时候，当前函数就会被调用 注意： 一、watch对象中存放的都是函数，函数的名称是data中的key值 二、当data的属性发生改变的时候，那么watch中的函数就会执行。watch中的函数不须要调用 三、watch中的函数会接收到2个值 一个是新值一个是旧值 四、watch(watch若是监听对象的状况下只会监听对象的地址有没有发生改变)若是想要监听对象的状况下，必须进行深度监听 五、若是须要进行深度监听的时候必须使用handler函数以及设置deep为true 六、在特殊的状况下watch是没法监听数组的变化,咱们能够经过this.$set进行数据的修改 七、watch默认状况下第一次页面加载的时候是不会进行数据的监听的，若是设置immediate就能够在第一次加载页面的时候进行数据的监听 核心: 当一个属性影响多个属性影响的时候就须要用到watch (搜索框 城市选择 vip级别选择....) 能用computed解决的不要用watch 面试题： 在watch中如何监听数组的变化？ 经过set进行数组的更改 */
</script>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程