vue实现的数据渲染
Vue 数据渲染的实现方式
Vue.js 提供了多种灵活的数据渲染方式，主要通过模板语法和响应式系统实现。以下是核心方法：
插值表达式（Mustache 语法）
使用双大括号 {{ }} 进行文本插值，数据变化时会自动更新：
<p>{{ message }}</p>data() {
return {
message: 'Hello Vue!'
}
}v-text 指令
等价于插值表达式，会替换元素的整个 textContent：
<span v-text="message"></span>v-html 指令
渲染原始 HTML 内容（注意防范 XSS 攻击）：
<div v-html="rawHtml"></div>v-bind 指令
动态绑定 HTML 属性，可简写为 :：
<img :src="imageSrc">
<a :href="url">链接</a>条件渲染
通过 v-if/v-else/v-show 控制元素显示：
<div v-if="isVisible">可见内容</div>
<p v-show="hasError">错误提示</p>列表渲染
使用 v-for 渲染数组或对象：
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.text }}
</li>响应式原理
Vue 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据响应式。当数据变更时，依赖该数据的视图会自动更新。
计算属性和侦听器
对于复杂逻辑，推荐使用计算属性：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}需要执行异步操作时使用侦听器：
watch: {
message(newVal, oldVal) {
console.log('消息变化:', oldVal, '→', newVal)
}
}组件间数据传递
- Props：父组件向子组件传递数据
<child-component :title="parentTitle"></child-component> - $emit：子组件向父组件发送事件
this.$emit('update', newValue) - provide/inject：跨层级组件通信
- Vuex/Pinia：状态管理库处理全局数据
