当前位置：首页 > news >正文

Vue中的计算属性和监视属性

news 2025/9/30 11:40:01

计算属性

1. 插值语法实现

<div id="root">姓:<input type="text" v-model="firstName">名:<input type="text" v-model="lastName"><h2>{{firstName}}-{{lastName}}</h2>
//如果插值语法中的表达式过长,就会不便于观察，并且也不符合规范
<h2>{{firstName。slice(0,3)}}-{{lastName}}</h2></div><script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",// data中的数据叫做属性data: {firstName: "张",lastName: "三"},})</script>

2. 改进：method语法实现

<div id="root"><!-- 只要data中的数据发生改变，Vue就会重新解析一遍模板，fullName就会被调用一次 -->姓:<input type="text" v-model="firstName">名:<input type="text" v-model="lastName"><!-- 在模板中使用插值语法调用方法，要加小括号 --><h2>{{fullName()}}</h2></div><script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",// data中的数据叫做属性data: {firstName: "张",lastName: "三"},methods: {fullName() {console.log("fullName被调用了");return this.firstName + this.lastName}},})</script>

3. 计算属性实现

定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层接住了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？

初次读取时会执行一次
当以来的数据发生变化时会再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算式以来的数据发生变化

计算属性简写

computed:{fullName(){console.log("get被调用了")return this.firstName + this.lastName}
}

监视属性 watch

<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {isHot: true},computed: {info() {return this.isHot ? "炎热" : "凉爽"}},methods: {changeWeather() {this.isHot = !this.isHot}},// watch: {//     isHot: {//         immediate:true,//默认是false,作用是初始化时让handler被调用//         handler什么时候调用？当isHot发生改变的时候//handler(newValue, oldValue) {//             console.log(newValue, oldValue)//         }//     }// }})//监视的第二种写法vm.$switch("isHot", {immediate: true,//默认是false,作用是初始化时让handler被调用handler(newValue, oldValue) {console.log(newValue, oldValue)}})</script>

深度监视

当被监视的属性发生变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法

new Vue时传入watch配置
通过vm.$watch监视

Vue中的watch默认不监测对象内部值的改变（第一层）
配置deep:true可以监测对象内部值的改变（多层）
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch根据数据的具体结构，决定是否采用深度监视

<script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {isHot: true,number: {a: 1,b: 2}},computed: {info() {return this.isHot ? "炎热" : "凉爽"}},methods: {changeWeather() {this.isHot = !this.isHot}},watch: {isHot: {//监视多级结构中某个属性的变化// "number.a": {//     handler(newValue, oldValue) {//         console.log(newValue, oldValue)//     }// }//监视多级结构中所有属性的变化numbers: {deep: true,handler() {console.log("number改变了")}}}}})</script>

watch和computed区别

computed能完成的watch都能完成
watch能完成的功能，computed不一定能完成，比如watch可以进行异步任务注意：
原被Vue所管理的函数，最好写成普通函数，纸样this只想才是vm或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

1. watch

<script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {firstName: "张",lastName: "三",fullName: "张-三"},watch: {firstName(val) {this.fullName = val + '-'+this.lastName},lastName(val) {this.fullName = this.firstName + '-'+ val}}})</script>

2. computed

 <script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {firstName: "张",lastName: "三"},//简写computed: {fullNmae() {return this.firstName + "-" + this.lastName;}}})</script>

3. 只能用watch,开启异步任务

watch: {firstName(val) {setTimeout(() => {this.fullName = val + '-' + this.lastName},1000)},lastName(val) {this.fullName = this.firstName + '-' + val}}