Vue3高级特性详解
3. Vue核心机制
3.1 响应式系统实现
3.1.1 计算属性详解
计算属性基于依赖关系进行缓存优化，仅在相关数据变更时重新计算。以下示例展示三种典型应用场景：
<div id="app">
{{ message }}
<br>
{{ reversedMessage }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'hello world!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}).mount('#app')
</script>
当数据发生动态变化时，可通过计算属性实现实时响应：
<div id="app">
商品名称：小米手机<br>
商品数量：<button @click="decrease">-</button>{{ count }}<button @click="increase">+</button><br>
总价：{{ totalPrice }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
count: 1
}
},
computed: {
totalPrice() {
return this.count * 5000
}
},
methods: {
decrease() {
this.count = Math.max(1, this.count - 1)
},
increase() {
this.count++
}
}
}).mount('#app')
</script>
通过计算属性可实现数据格式化处理：
<div id="app">
{{ formattedAmount }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
amount: 1000
}
},
computed: {
formattedAmount() {
return `${this.amount}￥`
}
}
}).mount('#app')
</script>
3.1.2 方法调用机制
methods用于定义组件行为，支持在模板中直接调用：
<div id="app">
{{ message }}
<br>
{{ reversedMessage() }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'hello world!'
}
},
methods: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}).mount('#app')
</script>
计算属性与方法的主要差异体现在：
- 缓存机制：计算属性具备缓存能力，方法每次调用都会执行
- 调用语法：模板中计算属性无需括号，方法需加括号
- 适用场景：计算属性适用于纯数据转换，方法适合复杂逻辑处理
3.1.3 数据监听机制
watch用于监控数据变化并触发相应操作：
<div id="app">
商品名称：小米手机<br>
商品数量：<button @click="decrease">-</button>{{ count }}<button @click="increase">+</button><br>
总价：{{ totalPrice }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
count: 1
}
},
computed: {
totalPrice() {
return this.count * 5000
}
},
methods: {
decrease() {
this.count--
},
increase() {
this.count++
}
},
watch: {
count(newVal, oldVal) {
this.count = newVal <= 0 ? oldVal : newVal
}
}
}).mount('#app')
</script>
深度监听适用于嵌套对象监控：
<div id="app">
商品名称：{{ product.name }}<br>
商品数量：<button @click="decrease">-</button>{{ product.quantity }}<button @click="increase">+</button><br>
总价：{{ totalPrice }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
product: {
name: '小米手机',
quantity: 1
}
}
},
computed: {
totalPrice() {
return this.product.quantity * 5000
}
},
methods: {
decrease() {
this.product.quantity--
},
increase() {
this.product.quantity++
}
},
watch: {
product: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
this.product.quantity = newVal.quantity
},
deep: true
}
}
}).mount('#app')
</script>
注意事项：
- 深度监听可能影响性能，建议仅在必要时使用
- 可监听数组内部元素变化，如push/pop/splice操作
解决数量越界问题的优化方案：
<div id="app">
商品名称：{{ product.name }}<br>
商品数量：<button @click="decrease">-</button>{{ product.quantity }}<button @click="increase">+</button><br>
总价：{{ totalPrice }}
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
product: {
name: '小米手机',
quantity: 1
}
}
},
computed: {
totalPrice() {
return this.product.quantity * 5000
},
productStr() {
return JSON.stringify(this.product)
}
},
methods: {
decrease() {
this.product.quantity--
},
increase() {
this.product.quantity++
}
},
watch: {
productStr(newVal, oldVal) {
const newProduct = JSON.parse(newVal)
const oldProduct = JSON.parse(oldVal)
this.product.quantity = newProduct.quantity <= 0 ? 1 : newProduct.quantity
}
}
}).mount('#app')
</script>
3.2 表单绑定技术
3.2.1 v-model绑定原理
实现表单数据双向绑定示例：
<div id="app">
<h3>注册</h3>
<form>
姓名：<input type="text" v-model="user.name"<br>
密码：<input type="password" v-model="user.password"<br>
确认密码：<input type="password" v-model="user.confirmPassword"<br>
性别：<input type="radio" v-model="user.gender" value="male">男
<input type="radio" v-model="user.gender" value="female">女<br>
爱好：<input type="checkbox" v-model="user.hobbies" value="eating">吃饭
<input type="checkbox" v-model="user.hobbies" value="sleeping">睡觉
<input type="checkbox" v-model="user.hobbies" value="chatting">聊天<br>
国籍：<select v-model="user.nationality">
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="UK">英国</option>
</select><br>
个人简介：<textarea cols="30" rows="10" v-model="user.bio"></textarea><br>
<input type="button" @click="register" value="注册">
</form>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
user: {
name: '',
password: '',
confirmPassword: '',
gender: 'male',
hobbies: [],
nationality: 'CN',
bio: ''
}
}
},
methods: {
register() {
console.log(this.user)
}
}
}).mount('#app')
</script>
3.2.2 v-model修饰符
常用修饰符功能说明：
- .lazy：在change事件后同步输入值
- .trim：自动去除首尾空格
- .number：自动转换为数字类型
<div id="app">
数量：<input type="text" v-model.lazy="quantity"<br>
输入：<input type="text" v-model.trim="inputText">
<button @click="submit">提交</button><br>
数值：<input type="text" v-model.number="number">
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
quantity: 10,
inputText: 'hello',
number: 0
}
},
methods: {
submit() {
console.log(this.inputText)
}
}
}).mount('#app')
</script>
