什么是Vue
Vue 是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层。
Vue的两大核心
- 数据驱动,也就是数据的双向绑定
Vue 响应式核心就是,getter 的时候会收集依赖,setter 的时候会触发依赖更新
vue将遍历data中对象的所有property,并使用 Object.defineProperty 把这些 property 全部转为
getter/setter。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property
被访问和修改时通知变更。每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。
getter的时候我们会收集依赖,依赖收集就是订阅数据变化watcher的收集,依赖收集的目的是当响应式数据发生变化时,能够通知相应的订阅者去处理相关的逻辑。
setter 的时候会触发依赖更新,之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
2.组件化系统
- 扩展HTML元素,封装可重用的代码。每一个组件都对应一个ViewModel。页面上每个独立的可视/可交互区域都可以视为一个组件。每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就进维护。页面是组件的容器,组件可以嵌套自由组合形成完整的页面。
vue.js的核心特点—MVVM模式
MVVM概述
:M:Model数据模型 , V:view 视图模板 , vm:view-Model:视图模型
vue是如何实现双向数据绑定的:当数据发生改变—自动更新视图。利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username"><br />
<span id="uName"></span>
<script>
var obj = {
pwd: '123'
}
Object.defineProperty(obj, 'username', {
set: function (val) {
document.getElementById('uName').innerText = val
document.getElementById('uNmae').value = val
console.log('set')
},
get: function () {
}
})
document.getElementById('username').addEventListener('keyup' ,function () {
obj.username = event.target.value
})
</script>
</body>
</html>