简析vue中的声明式渲染&响应式,ref()&reactive()

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
})
}
})
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值