Vue 基础结构
h函数:创建虚拟dom
render:把h函数创建的虚拟dom返回
$mount:把虚拟dom转为真实dom渲染到浏览器
Vue 生命周期
image.png
Vue 语法与概念 上
差值表达式
指令 (Vue 中内部指令有14个、自定义指令)
-
计算属性和侦听器
(当模板中有太多逻辑要处理的时候,推荐用计算属性,计算属性的结果会被缓存,下次再访问该计算属性的时候会从缓存中获取相应的结果,提高性能;
如果需要监听数据的变化做些比较复杂的操作,如异步操作或开销比较大的操作,可以使用监听器)
Class 和 Style 绑定 (分别可以绑定数组或者对象,推荐使用Class绑定,因为样式可以重用)
条件渲染/列表渲染 (可以通过 v-if 或 v-show 控制元素的显示、隐藏,列表渲染使用 v-for ,vue 推荐我们给 循环项都设置一个key,用来跟踪每个节点的身份,让每一项都能最大程度的被重用,从而提高性能)
表单输入绑定 (当我们使用 v-model 绑定表单元素的时候,它负责监听用户的输入事件以及更新数据,也就是双向绑定)
Vue 语法与概念 下
组件 (组件是可复用的Vue实例,一个组件中封装了html、css、javascript,它可以实现页面中的一个功能区域,可以无限次重用)
插槽(插槽可以在我们自定义组件中挖一个坑,在使用这个组件的时候去填坑,这样做的目的是让组件更灵活,比如:Vue Router 中的 router-link组件,它里面的文本是从外部传进来的,内部就是用插槽来占位的)
插件 (VueRouter、Vuex都是插件)
混入(如果多个组件都有相同的选项,就可以用混入的方式把相同的选项进行合并让代码重用)
深入响应式原理
-
不同构建版本的Vue(Vue 打包之后会生成不同版本的 Vue,它支持不同的模块化方式,以及带编译器和不带编译器版本的 Vue)