Vue2 入门到实战（day2）：计算属性、监视属性、样式绑定与条件渲染（附代码案例）

        在 Vue 开发中，计算属性、监视属性、样式绑定和条件渲染是高频使用的核心语法。它们能让数据处理更高效、页面样式更灵活、DOM 渲染更智能。本文结合实战案例，详细拆解每个语法的用法、原理和最佳实践，适合 Vue 初学者系统学习。

一、计算属性（computed）：依赖数据的 “智能属性”

计算属性是基于已有数据计算得出的新属性，核心优势在于缓存机制，能提升页面渲染效率。

核心特性

• 本质：底层借助Object.defineProperty的getter和setter实现。
• 触发时机：get函数在初次读取属性或依赖数据变化时执行；set函数在属性被修改时执行。
• 优势：与 methods 相比，内部缓存可复用结果，避免重复计算，效率更高。
• 注意：计算属性最终会挂载到 vm 实例上，可直接读取；若需修改，必须编写set函数并更新依赖数据。

实战案例：姓名拼接

完整版（可读可改）

<div id="root">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <!-- 直接使用计算属性 -->
</div>
<script>
const vm = new Vue({el: '#root',data: { firstName: '张', lastName: '三' },computed: {fullName: {// 读取fullName时触发get() {console.log('get被调用');return this.firstName + '-' + this.lastName;},// 修改fullName时触发set(value) {const arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}}
});
</script>

简写版（只读不改）

若计算属性无需修改，可省略get和set，直接简写为函数形式：

computed: {fullName() {return this.firstName + '-' + this.lastName;}
}

二、监视属性（watch）：数据变化的 “监听器”

监视属性用于监听已有数据的变化，当数据改变时触发回调函数，可执行自定义逻辑（如异步操作）。

核心特性

• 监视目标：必须是已存在的数据（如 data、computed 中的属性）。
• 两种写法：Vue 实例配置项watch或实例方法vm.$watch。
• 深度监视：默认仅监视数据表层变化，配置deep: true可监视对象内部嵌套数据。
• 即时执行：配置immediate: true，初始化时立即触发一次回调。

实战案例：天气切换

写法 1：配置项形式

<div id="root"><h2>今天天气{{info}}</h2><button @click="changeWeather">切换天气</button>
</div>
<script>
const vm = new Vue({el: '#root',data: { isHot: true },computed: {info() { return this.isHot ? '炎热' : '凉爽'; }},methods: {changeWeather() { this.isHot = !this.isHot; }},watch: {isHot: {immediate: true, // 初始化触发deep: true, // 深度监视（若isHot是对象时需开启）handler(newVal, oldVal) {console.log('天气变化：', newVal, oldVal);}}}
});
</script>

写法 2：实例方法形式

// 适用于动态确定监视目标的场景
vm.$watch('isHot', {immediate: true,handler(newVal, oldVal) {console.log('天气变化：', newVal, oldVal);}
});

简写版

无需额外配置（如immediate、deep）时，可直接简写：

// 配置项简写
watch: {isHot(newVal, oldVal) {console.log('天气变化：', newVal, oldVal);}
}// 实例方法简写
vm.$watch('isHot', function(newVal, oldVal) {console.log('天气变化：', newVal, oldVal);
});

深度监视实战

监视嵌套对象内部值的变化：

data: {numbers: { c: { d: { e: 100 } } }
},
watch: {numbers: {deep: true,handler() {console.log('嵌套数据发生改变');}}
}

三、computed 与 watch 的核心区别

特性	computed	watch
功能范围	仅支持同步计算	支持同步、异步操作（如定时器、ajax）
依赖关系	基于依赖数据自动更新	需明确指定监视的属性
缓存机制	有缓存，重复读取不重复计算	无缓存，数据变化即触发
使用场景	数据联动计算（如拼接、筛选）	数据变化后的副作用操作（如日志、请求）

关键原则

1. 被 Vue 管理的函数（如get、handler），需写成普通函数，确保this指向 vm 实例。
2. 不被 Vue 管理的函数（如定时器、ajax 回调），需写成箭头函数，避免this指向全局。

四、样式绑定：动态控制页面样式

Vue 支持通过v-bind:class（简写:class）和v-bind:style（简写:style）动态绑定样式，灵活适配不同场景。

1. 绑定 class 样式

字符串写法（类名动态变化）

适用于类名不确定，需动态获取的场景：

<style>
.normal { background: skyblue; }
.happy { background: pink; }
</style>
<div id="root"><div class="basic" :class="mood" @click="changeMood">点击切换样式</div>
</div>
<script>
const vm = new Vue({el: '#root',data: { mood: 'normal' },methods: {changeMood() {const arr = ['happy', 'sad', 'normal'];this.mood = arr[Math.floor(Math.random() * 3)];}}
});
</script>

数组写法（多类名动态组合）

适用于类名、个数均不确定的场景：

<style>
.style1 { font-size: 30px; }
.style2 { color: red; }
.style3 { border-radius: 8px; }
</style>
<div class="basic" :class="classArr">数组绑定样式</div>
<script>
data: {classArr: ['style1', 'style2', 'style3'] // 可动态修改数组元素
}
</script>

对象写法（类名是否启用动态控制）

适用于类名、个数确定，但需动态决定是否使用的场景：

<div class="basic" :class="classObj">对象绑定样式</div>
<script>
data: {classObj: {style1: true, // 启用style1style2: false, // 禁用style2style3: true // 启用style3}
}
</script>

2. 绑定 style 样式

对象写法（直接绑定样式键值对）

<div :style="styleObj">style对象绑定</div>
<script>
data: {styleObj: {fontSize: '24px',color: 'blue',backgroundColor: '#f5f5f5'}
}
</script>

数组写法（多样式对象组合）

<div :style="styleArr">style数组绑定</div>
<script>
data: {styleArr: [{ fontSize: '24px', color: 'blue' },{ backgroundColor: '#f5f5f5', borderRadius: '8px' }]
}
</script>

五、条件渲染：按需展示 DOM 元素

Vue 提供v-if和v-show两种条件渲染指令，根据表达式结果控制 DOM 的显示与隐藏。

1. v-if 指令（直接操作 DOM）

• 特点：不满足条件时，DOM 元素会被直接移除（而非隐藏）。
• 语法：支持v-if、v-else-if、v-else组合使用，结构不可被打断。
• 适用场景：切换频率低的场景（如页面初始化时的条件展示）。

实战案例

<div id="root"><div v-if="n === 1">Vue</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Angular</div><div v-else>请选择框架</div><!-- 配合template批量控制多个元素 --><template v-if="n === 1"><h3>Vue优势</h3><p>轻量、易用、生态完善</p></template>
</div>
<script>
const vm = new Vue({el: '#root',data: { n: 1 }
});
</script>

2. v-show 指令（通过样式隐藏 DOM）

• 特点：不满足条件时，DOM 元素保留，仅通过display: none隐藏。
• 语法：v-show="表达式"，不支持v-else组合。
• 适用场景：切换频率高的场景（如按钮控制的显示隐藏）。

实战案例

<div id="root"><h2 v-show="isShow">v-show条件渲染</h2><button @click="isShow = !isShow">切换显示</button>
</div>
<script>
const vm = new Vue({el: '#root',data: { isShow: true }
});
</script>

v-if 与 v-show 的核心区别

特性	v-if	v-show
DOM 操作方式	移除 / 创建 DOM 元素	隐藏 / 显示 DOM（display 属性）
初始渲染开销	较高（需操作 DOM）	较低（仅设置样式）
切换开销	较低（直接移除 / 创建）	较高（频繁切换样式）
元素获取	隐藏时无法获取 DOM	隐藏时仍可获取 DOM

总结

        本文涵盖 Vue 中 4 个核心语法模块：计算属性侧重数据联动计算，监视属性侧重数据变化后的副作用操作，样式绑定实现动态样式控制，条件渲染按需展示 DOM。掌握这些语法的使用场景和核心区别，能大幅提升 Vue 项目的开发效率和代码质量。