Vue的核心思想

本文深入探讨Vue.js的两大核心特性:数据驱动与组件化。详细介绍数据双向绑定机制及其实现原理,包括数据响应机制、指令与Watcher的作用;并讲解如何通过组件化提升代码复用率,遵循组件设计原则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.数据驱动:
(1).DOM是数据的一种自然映射,手动改变DOM非常麻烦使用vue.js之后,只需要改变数据,通过改变Directives指令,当数据发生变化,会通过数据指令去修改对应的DOM

(2).Vue.js还会对事件进行一定的监听,当我们改变视图(view)的时候通过DOM Listeners来改变数据

通过以上两点就实现了数据的双向绑定

数据响应原理



在一份数据a.b在一个vue实例化的过程中会给ES5中的obj.Dependcies的属性添加一个getter 和 setter,同时vue.js会对模板进行编译,生成一个指令对象(右边那个黄色的就是一个v-text=“a.b”的指令),每一个指令对象都会关联一个Watcher(中间那个蓝色的),对指令对应的表达式做对应的求值的时候就会触发了getter就会吧依赖升级到Watcher,当我们再次改变了a.b(在黄色那里改变)的值的时候就会触发到setter,会通知到对应的Watcher,然后Watcher再次对a.b求值,计算对比新旧值,当发现值改变Watch就会通知到指令,调用指令Update的方法,由于指令是对DOM的封装所以,就会调用原生DOM的方法去更新视图





2.组件化

组件化目的是扩展HTML元素,封装可重用的代码


右边是我们的可视化页面

在vue中每一个组件对应一个view的Model,最终生成右边那个树


组件的设计原则
页面上每一个独立的可视/可交互区域视为一个组件

每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护

展示面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值