Vue如何处理数据、v-HTML的使用及总结

示例代码：

const vm = {}; // 代表 Vue 实例

// 1. 将 data 属性转为响应式
const data = {
courseGoalA: ‘学习Vue…’,
courseGoalB: ‘掌握Vue…’,
vueLink: ‘https://…’
};
vm._data = reactive(data); // 转换为响应式对象

// 2. 代理数据：将 _data 的属性映射到实例顶层
for (const key in data) {
Object.defineProperty(vm, key, {
get() { return vm._data[key]; },
set(value) { vm._data[key] = value; }
});
}

vm.outputGoal = methods.outputGoal.bind(vm);

使用v-HTML输出原始HTML内容

const app = Vue.createApp({
data() {
return {
courseGoalA: ‘学习Vue,最终掌握Vue’,
courseGoalB: ‘掌握Vue,并构建相应的应用程序’,
vueLink: ‘https://cn.****.org/’
};
},
methods: {
outputGoal() {
const ran = Math.random();
if (ran > 0.5) {
return this.courseGoalA;
} else {
return ‘<h2>掌握Vue,并构建相应的应用程序</h2>’;
}
}
}
});

app.mount(‘#user-goal’);

使用v-html会绕过使用插值内置的跨站脚本防护
v-html不会对内容进行转义，这也意味这插入的恶意JavaScript代码也会被执行；
Vue 默认对所有插值表达式进行 HTML 转义，提供 XSS 防护，v-html 会绕过这种内置防护；
所以在使用V-html的时候，需要你保证插入的是可信的内容；