海浪Code

Appearance

代码示例 ​

@事件=“ff”,ff这里可以写一些简单的语句

html
<body>
    <div class="container">
        <!-- 三目表达式  布尔值?真:假 -->
        <h2>今天天气很{{info}},点击次数{{x}}</h2>
        <!-- 完整写法 -->
        <!-- <button @click="changeWeather">切换天气</button> -->
        <!-- 简写：@click可以写简单的语句 -->
        <button @click="isHot = !isHot;x++">切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            // 绑定容器
            el:'.container',
            data:{
                isHot:true,
                x:1
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed:{
                info(){
                    // 只有通过vm才能拿到isHot
                    return this.isHot?"炎热":'凉爽'
                }
            }
        })
    </script>
</body>

handler ​

当数据被修改时会被调用

JavaScript
//监视属性需要存在才可监视
watch:{
    isHot:{
        handler(newVaule,oldValue){
            console.log('isHot被修改了',newVaule,oldValue);
        }
    }
}
// 第二种写法，写在vm外面
vm.$watch('isHot',{
    immediate:true,
    handler(newVaule,oldValue){
        console.log('isHot被修改了',"新值：",newVaule,"旧值：",oldValue);
    },
})

计算属性也可以监视

immediate ​

JavaScript
// 初始化时就执行一次handler，默认值是false
immediate:true,

深度监视 - deep ​

Vue自身可以监测到对象内部值的改变，但是提供的watch默认是不可以监视的。

javascript
// 监视多级属性中某个属性的变化 
// 原始写法'对象名.对象值'
'number.a':{
    handler(){
        console.log('a被改了');
    }
}

// 监视多级属性中所有属性的变化
number:{
    // 开启深度监视,可以监视到内层的属性（默认值是false)
    deep:true,
    handler(){
        console.log('number变了');
    }
}

简写形式 ​

如果我们不需要immediate和deep配置项就可以采用简写

JavaScript
watch:{
    isHot(){
        console.log('isHot被修改了',"新值：",newVaule,"旧值：",oldValue)
    }
},

计算属性和监视的区别 ​

计算属性能完成的监视也可以完成，监视属性能完成的计算属性不一定能完成。例如异步操作。

当需要进行异步操作时，在watch和计算属性中选择watch

箭头函数 ​

watch里面的定时器需要使用箭头函数。

JavaScript
firstname(newValue){
    setTimeout( () => {
        console.log(this);
        this.fullName = newValue + "-" + this.lastname
    },1000) 
}
// 如果使用普通函数，this将会是window

箭头函数的this指向当前作用域

箭头函数的特点：本身不存在this，但是可以通过调用上下域中的this供自己使用

两个重要小原则 ​

  1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
  2. 所有不被Vue管理的函数（定时器回调函数，ajax的回调函数，Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm 或 组件实例化对象。