SPA的理解
在页面初始化时，加载所有的资源。加载完成之后，页面的所有操作对于后端服务器来说是没有感知的。
优点
- 用户体验比较好，页面的跳转不需要重新加载整个页面资源
- 前后端解耦，前端负责交互逻辑，后端负责数据处理
- 对于服务端压力比较小
缺点
- 初次加载时，比较耗费时间。【所以要通过缩短首屏时间来优化】
- 需要前端自己管理路由，不能使用浏览器的前进和后退功能
- 不利于浏览器的SEO
MVC
- M —— model : 数据
- V —— view : 视图
- C —— controller:控制器
方式一
方式二
MVVM
理解
- M —— model : 对应vue实例中的data
- V —— view: 对应vue组件中的template模板
- VM —— v-model:对应vue实例中的操作，view通过事件监听影响model，model通过数据绑定影响view
优点
- 数据和视图分离，降低代码的耦合性，提高视图和逻辑的重用性。
- 以数据驱动视图：只关心数据的变化，DOM操作被封装
- 有利于自动化测试
jquery和使用框架的区别
- react的组件化、vue中数据和视图分离:方便维护、组合、扩展。
- 以数据驱动视图：只关心数据的变化，DOM操作被封装。
- 生态: 现代前端框架都有自己的生态。
- 开发效率：数据驱动视图，不需要手动的操作DOM。
创建项目
- 安装vue-cli工具
npm install -g @vue/cli
yarn global add @vue/cli
- 创建vue项目
vue create myproject
- autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。
cube-ui 的使用
vue add cube-ui
创建后的项目中的.babelsrc文件
vue三要素
响应式 ：即修改data属性之后，vue立刻监听到变化
vue首先将data上的属性代理到vm（vue实例）上
var vm = {}
var data = {
price : 100,
name ： ’zhagnshan
}
vue如何监听data的每个属性的变化
- Object.defineProperty
- 模拟
data属性如何被带了到vm上
var vm = {}
var data = {
price:100,
name:'zhangsan'
}
var key, value
for(key in data){
(function(key){
Object.defineProperty(vm,key,{
get:function(){
console.log('get')
return data[key]
},
set:function(newVal){
console.log('set')
data[key] = newVal
}
})
})(key)
}
模板引擎： vue的模板如何被解析，指令如何处理
模板是什么？
- 模板的本质是带有逻辑的字符串
- 模板最终会通过JS代码（render函数）转换成html代码渲染到页面中
render函数
- render函数的实现使用了with语法,with(this)中this指向vue实例
- render函数执行返回的是_c()的返回值，即vnode
渲染：vue的模板如何被渲染成html？以及数据变化后的渲染过程
通过vm.update()函数将render函数返回的结果渲染到页面上
vm._update(vnode){
const preVnode = vm._vnode
vm._vnode = vnode
if(!prevVnode){
vm.$el = vm.__patch__(vm.$el,vnode)
}else{
vm.$el = vm.__patch__(prevVnode,vnode)
}
}
function updateComponent(){
vm._update(vm.render()) //vm.render()返回vnode
}
vue的整个实现流程
- 将模板解析成render函数: code.render可以打印render函数
- render函数中使用了with，render函数返回vnode
- 模板中的信息都被render函数包含
- 模板中用到的data属性，都会变成js变量
- 模板中的v-model v-for v-on都变成了js逻辑
- 响应式监听
- Object.defineProperty实现get set
- data上的属性代理到vm上（使用了with语法）
- 首次渲染，显示页面，绑定依赖【待补充】
- 初次渲染，执行updateComponent,执行vm._render()，执行vm._update(),会走到vm.__patch__方法
- 会访问到vm.list和vm.title，会被响应式的get方法监听到
注意： 为何要监听get,不只是监听set?
- data中有很多属性，有些会被用到，有些可能不被用到，被用到的才会走get，没被用到的不会走get
- 未走到get中的属性，set的时候我们也无需关心
- 避免不必要的重复渲染
- data属性变化，触发rerender
- 修改属性，被响应式的set监听到
- set中执行updateComponent，重新执行vm._render()，生成的vnode和preVnode,被patch进行对比，渲染成HTML到页面中
v-if和v-show的区别
- v-if:页面压根就不会渲染DOM，适合在运行时很少改变条件，不会频繁切换的情况下使用。
- v-show:将元素的display属性设置为none，v-show适合在运行时频繁切换。
