vue的最基本理解

作为一个前端新手,一切问题皆原生js,突然要着手一个vue的项目,就如好汉上梁山,被逼出来的,渐渐熟悉vue,你会发现上山的路,是一条宽敞的高速公路,不断催化你的惰性(一切皆组件),却又提高了开发效率(与原生js相比较而言)。
只要是有关于vue的介绍,一定会有“数据和DOM建立了关联,所有东西都是响应式的”的字眼,如果只是处于理论,可能永远无法体会其中的精髓,所以,让原生js和vue一决高下吧(当然,从性能角度)
以一个添加功能为例:
(1)原生js:
在这里插入图片描述
点击一次就会生成一个DOM元素,很明显需要操作DOM

(2)可爱的vue:
在这里插入图片描述
反观vue,我们实际只需要去改变相应数据(tableData),就会达到我们想要的结果,可以将数据打印到控制台,每当你点击一次,数据就会相应变化。个人的理解为:实际vue将数据和视图双向绑定,任何一方变化了,另一方也会发生变化,数据驱动视图。
在这里插入图片描述
注意:如果改变的数据是一个数组,所用的数组方法一定要改变原数组的才可以,否则将不起作用。
例如concat:把两个或多个数组拼接,产生一个新的数组
在这里插入图片描述
在这里插入图片描述
可以看出arr数组没有改变,同理,如果vue中的数据本身没有变化,只是创建了一个新的数据,这个新数据压根没有使用,视图当然不会改变(因为数据没有改变)

总结:
(1)不同逻辑
原生js:对DOM元素的操作改变视图
Vue:对数据的操作改变视图
(2)性能
今天你突发奇想,改造一下你的房间,两个方案:
原生js:将房子拆了重建,在进行装饰
Vue:直接改变装修风格,改变房间饰品
很明显vue的效率更快,付出的代价更小

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值