vue中很重要的两个词,"声明式渲染"和"响应式"。
vue的核心功能是声明式渲染。
对于声明式渲染,不要纠结这个词,你可以将其完全等价理解为:vue扩展了标准HTML的模板语法,用JavaScript的状态描述HTML应该是什么样子的,当状态发生改变,HTML会自动更新。
总结为一句话:vue用JavaScript扩展了HTML,JavaScript的改变,触发HTML更新。
这样也能理解,为什么JavaScript、HTML、css被设计成混写在vue中。
而这种设计带来的另一个词,是响应式。你在你的vue文件中声明的东西必须是响应式的,否则无法触发HTML更新。
实现响应式的方法是:1.ref()函数;2.reactive()函数
ref & reactive
1.官方推荐我们尽量使用ref;
2.reactive能实现的,ref基本都能实现;
3.reactive不能实现的,ref也能实现;
4.reactive局限之一:只能用于对象;
5.reactive局限之二:不能替换整个对象;
什么意思?用reactive声明的东西,不能重新赋值,只能修改其内部的值
举个例子如下:
const arr = reactive([]) // 此时arr具备响应性
const getData = () => {
axios.get('xxx').
then(response => {
// 一旦发生赋值操作,arr则不再具备响应性,使用到arr的地方,
// 不会去检测arr的变化,更不会有任何更新操作
arr = response.data.tree
})
}
修改如下:
const arr = reactive([])
const getData = () => {
axios.get('xxx').
then(response => {
for(let i = 0;i<response.data.tree.length;i++){
arr.push({ // 利用push等操作,是对原对象进行内部元素的操纵,arr仍具有响应性
xxx: response.data.tree[i].xxx,
yyy: response.data.tree[i].yyy
})
}
})
}