VUE2
优点
- 体积小
- 运行效率高（虚拟dom,diff算法）
- 双向数据绑定
- 学习成本低，生态丰富
基础
Vue实例
var vm = new Vue({
// 参数
})参数
data
props
propsData
computed
methods
watch
el
template
render
renderError
生命周期函数
directives // 自定义指令
filters // 过滤器
components // 可用组件
parent
mixins
extends
provide / inject
...
生命周期
- beforeCreate（创建前），在数据观测和初始化事件还未开始
- created（创建后），完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来
- beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
- mounted（载入后），在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
- beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
- updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
- beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
- destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
语法糖
- v-model
- v-bind
- v-on
- v-if/v-else-if/v-else
- v-show
- v-text
- v-html
- v-for
- v-slot
- v-pre
- v-cloak
- v-once
- ...
vue内置组件
component
keep-alive
slot
vue组件示例
<template>
<div>
<h1>{{ title }}</h1>
<ChildComponents></ChildComponents>
</div>
</template>
<script>
// 引入子组件
import ChildComponents from "./ChildComponents.vue";
// 引入其他Js脚本或类库
import Cookie from "@/lib/cookie.js";
export default {
//注册子组件
components: {
ChildComponents,
},
//组件私有数据
data() {
return {
title: "组件标题",
firstName: "",
lastName: "",
};
},
//父组件传递过来的数据（两种方式声明：1.数组 2.对象）
props: {
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0;
},
},
},
//计算属性
computed: {
fullName() {
return this.firstName + this.lastName;
},
},
//监听
watch: {
title(preVal, newVal) {
console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`);
},
},
//方法集
methods: {
getCurrentDate() {
return new Date().toLocaleDateString();
},
},
//生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
beforeCreated() {
console.log("component before created");
},
//生命周期钩子：组件实例完成创建之后调用
created() {
console.log("component created");
},
//生命周期钩子：组件实例渲染完成时调用
mounted() {
console.log("component mounted");
},
// ...
};
</script>
<style lang="less" scoped>
div {
width: 100%;
}
</style>vue-router
- 路由模式： hash、history
使用方法
- 创建路由组件，挂载到Vue实例中
- 配置路由映射：组件和路径映射关系
- 使用路由：通过
<router-link>和<router-view>
vuex
dispatch -> action -> commit -> mutation -> store
概念
- State
- Getters
- Mutations
- Actions
- Modules
辅助函数
- mapState
- mapGetters
- mapMutations
- mapActions
渲染函数 JSX
- render写法
- vue语法适配
原理
MVVM设计模式
- Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
- View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
- ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。双向数据绑定。
响应式
Vue2 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
双向数据绑定原理
- Object.defindeProperty检测data变化
- 重新定义数组原型
- 监听对象属性
const data = {};
let name = "张三";
Object.defineProperty(data,'name',{
get:function(){
console.log('触发get')
return name
},
set:function(newVal){
console.log('触发set')
name=newVal
}
})
//测试
console.log(data.name) // 触发get 张三
data.name = '李四' // 触发set缺点
- 深度监听obj，需要递归到底，一次性计算量大，如果数据过大页面，页面可能会卡死
- 无法监听新增属性/删除属性（提供Vue.set Vue.delete）
虚拟DOM、DIFF算法
- 在内存中构建虚拟dom树；
- 将内存中虚拟dom树渲染成真实dom结构；
- 数据改变的时候，将之前的虚拟dom树结合新的数据生成新的虚拟dom树；
- 将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对（diff算法进行比对），来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历；
- 会将对比出来的差异进行重新渲染；
进阶
vue-cli/Webpack、Babel
- 项目搭建
- 打包配置
- bable编译配置
SSR
Vue插件
- 使用（Vue.use）
- 开发（install 方法）
Vue与React
- JSX 和纯函数式的编程范式,直接进行局部重新刷新（或者重新渲染），更简单，对原生的支持和更彻底贯彻相关思想显得更纯粹;
- Vue 进行数据拦截/代理，它对侦测数据的变化更敏感、更精确，也间接对一些后续实现（比如 hooks，function based API）提供了很大的便利;
- Vue 的方案在结构、样式、业务分离方面更清晰彻底，更符合前端多年来的编码习惯，更符合直觉，更容易学习和维护;
- 相比 React 需要学习的新概念比较少，把 API 看一遍就上手，学习曲线平滑。看下这个问题下的答案多少把二者当做框架、分不清模板和 virtual dom 就能体会了，但对研究不深的使用者或者初学者其实影响不大，React 的文档可比 Vue 简短多了，大篇幅在介绍概念而非 API;
- React 并不知道什么时候“应该去刷新”，触发局部重新变化是由开发者手动调用 setState 完成。React setState 引起局部重新刷新。为了达到更好的性能，React给开发者 shouldComponentUpdate 这个生命周期 hook，来避免不需要的重新渲染（相比之下，Vue 由于采用依赖追踪，默认就是优化状态：你动了多少数据，就触发多少更新，不多也不少，而 React 对数据变化毫无感知，它就提供 React.createElement 调用已生成 virtual dom）。
