计算属性

点击查看 Vue文档

基础语法

多次使用计算属性，计算属性方法也只执行一次，
调用计算属性的方法不能加()

直接修改计算数学的值

计算属性不能通过双向绑定修改（默认不能改）
想要修改计算属性，就必须使用计算属性的完整写法

完整写法
计算属性：{
//计算属性默认只有get，在需要的时候添加set()
get(){
return 结果
},
ser(val){
//val就是修改后的计算属性
}
}

watch侦听器

作用：侦听数据变化，执行一些业务逻辑或异步操作
如果监听对象中的属性，不能直接当函数名，需要加上引号

监听from、q、to变化时，都要重新翻译，则可以直接监听一个对象

watch:{
数据：{
handler(变化后的值，变化前的值)
},
deep：true ,//加入改配置，表示深度监听：当对象的任意属性值改变后，都可以侦听到
immediate:true//立即侦听（页面刷新，马上执行一次handler函数）
}

生命周期

Vue生命周期函数（钩子函数）自动执行的函数

每个阶段对应两个钩子函数

<div id="app">
        <h2>{{title}}</h2>
        <button @click="count--">-</button>
        <span>{{count}}</span><button @click="count++">+</button>
    </div>

    <script src="../utils/vue.js"></script>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                title: '钩子函数演示',
                count: 100
            },
            // 创建阶段
            beforeCreate() {
                console.log('beforeCreate：', this.count); //此时还不能使用data数据以及调用methods方法
            },
            created() {
                console.log('created:', this.count); //此时可以使用data数据，可以调用methods方法
            },
            // 挂在阶段
            beforeMount() {
                console.log('beforeMount:', document.querySelector('h2'));

            },
            mounted() {
                console.log('beforeMount:', document.querySelector('h2'));
            },
            // 更新阶段（数据更新才触发）
            beforeUpdate() {
                // 数据更新了但是页面还没有更新
                console.log('beforeUpdated:', this.count, document.querySelector('span').innerHTML);
            },
            updated() {
                // 数据、页面都更新
                console.log('updated:', this.count, document.querySelector('span').innerHTML);
            }
        })


    </script>