Vue计算属性、监听属性

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

计算属性

computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，如果在模板中放入太多的逻辑会让模板过重且难以维护

也就是说，某些时候页面中的模板变量如果需要复杂的运算处理，应该使用计算属性，而不是直接在模板位置进行计算。

var vm = new Vue({
    el: "#container",
    data: {
        String1:"这是一个字符串",
    },
    methods: {
        MreverseString(){
            return this.String1.split("").reverse().join("")
        } // 定义一个函数进行字符串逆置
    },
    computed: {
        CreverseString(){
            return this.String1.split("").reverse().join("")
        } // 定义一个计算属性进行字符串逆置
    }
})

<div id="container">
    <p>这是一个字符串:{{ String1 }} </p>
    <p>他的逆置:{{ String1.split("").reverse().join("") }} </p>
    <p>他的逆置:{{ CreverseString }} </p>
    <!-- 计算属性直接写入函数名 -->
    <p>他的逆置:{{ MreverseString() }} </p>
    <!-- 普通methods函数调用需加括号 -->
</div>

虽然计算属性和函数都可以达成同样的目的，但是computed会缓存结果，计算属性如果发现依赖的属性message未发生改变，再次访问计算属性不会重复运算函数，而是直接利用已有结果；如果依赖数据发生改动，计算属性函数才会重新运算。

在函数及计算属性中添加日志输出即可看到这个效果：

methods: {
    MreverseString() {
        console.log("MreverseString被运算了")
        return this.String1.split("").reverse().join("")
    }
},
computed: {
	CreverseString() {
		console.log("CreverseString被运算了")
		return this.String1.split("").reverse().join("")
	}
}

在终端下进行计算属性以及函数的访问即可看到效果。

计算属性SetAttr

默认的计算属性只有获取getattr的方式，我们可以手动为他添加一个setter

computed:{
    CreverseString: {
        get: function(){
            return this.String1.split("").reverse().join("")
        }
        set: function(val){
            this.String1 = val.split("").reverse().join("")
            // 如果当前的逆置之后字符串为val，那么原本的字符串需要再颠倒一次
        }
    }
}

侦听属性

侦听属性的作用是侦听某些属性的变化，从而做相应的操作，进行对数据变化的相应，

侦听属性是一个对象（字典），key值是要监听的元素，值是当监听的元素发生改变时要执行的函数；

监听函数有两个参数，一个是当前值，另一个是变化后的值

• 比如监听一个输入框输入过程敲击键盘的次数

var vm = new Vue({
    el: "#container",
    data:{
        content: "", // 表单内容
        count: 0, // 记录表单内用户敲了多少次
    },
    watch:{
        content:function (oldVal,newVal){
            // 只要在文本框输入内容影响到了age数据发生改变，就会触发
            this.count += 1
        }，
    }，
})

<div id="container">
    <p><label>你敲了:{{ count }}次</label></p>
    <input type="text" placeholder="请输入你的年纪" v-model="content">
</div>