vue 实现赋值
Vue 实现赋值的方法
在 Vue 中，赋值操作通常涉及数据绑定和响应式更新。以下是几种常见的赋值方式：
直接赋值给 data 属性
在 Vue 实例的 data 对象中定义的属性可以直接通过 this 访问并赋值。Vue 会自动处理响应式更新。
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
updateMessage() {
this.message = 'New message'
}
}使用 v-model 双向绑定
v-model 指令可以实现表单输入和应用状态之间的双向绑定。
<input v-model="message">data() {
return {
message: ''
}
}通过计算属性赋值
计算属性可以基于其他属性动态计算值，适合需要复杂逻辑的赋值场景。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}使用 Vue.set 或 this.$set
当需要给响应式对象添加新属性时，需要使用 Vue.set 或 this.$set 确保新属性也是响应式的。
methods: {
addNewProperty() {
this.$set(this.someObject, 'newProperty', 'value')
}
}数组的响应式更新
直接通过索引修改数组元素不会触发视图更新，应使用 Vue 提供的变异方法或 Vue.set。
// 正确方式
this.someArray.splice(index, 1, newValue)
// 或
this.$set(this.someArray, index, newValue)使用 watch 监听变化
当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}通过 props 传递值
父组件可以通过 props 向子组件传递数据，子组件不能直接修改 props，但可以通过触发事件让父组件修改。
// 父组件
<child-component :message="parentMessage" @update="parentMessage = $event"></child-component>
// 子组件
props: ['message'],
methods: {
updateParent() {
this.$emit('update', 'New value')
}
}使用 ref 操作 DOM 元素
通过 ref 可以获取 DOM 元素或子组件实例，并直接操作它们的属性。
<input ref="inputRef">methods: {
focusInput() {
this.$refs.inputRef.focus()
}
}以上方法涵盖了 Vue 中大多数赋值场景，选择合适的方式取决于具体需求和上下文。
