VUE框架：基础知识及核心原理

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

Vue (读音 /vjuː/，类似于
view) 是一套用于构建用户界面的
渐进式框架

特点：易用、灵活、高效

全家桶：vue + components（vue element / iview…） + vue-router + vuex + vue-cli

类库 vs 插件 vs 组件 vs 框架

类库：jquery、zepto、underscore…插件：dialog、banner、drag、tab、iscroll…组件：bootstrap、swiper…框架：backbone、angular、vue、react、uni-APP、react native、flutter…

声明式和命令式

命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现，例如for循环声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)，例如数组内置方法forEach等

MVC & MVVM

传统操作DOM模式MVC：model view controllerMVVM：model view viewModel

<div id=”app”>        {{msg}}</div><!– IMPORT JS –><script src=”node_modules/vue/dist/vue.min.js”></script><script> new Vue({         el: ‘#app’,         data: {                 msg: ‘hello world’         }        });        setTimeout(() => {         vm.msg = ‘你好世界’; }, 1000);</script><div id=”app”> 人民币：￥<input type=”text” v-model=’price’>元        <br> 美元：${{price/8}}</div><!– IMPORT JS –><script src=”node_modules/vue/dist/vue.min.js”></script><script> let vm = new Vue({ el: ‘#app’, data: { price: 0 } });</script>

VUE的基础语法

new Vue(options)

返回值vm（viewModel）el：不能挂载到html或者body上 =>querySelectordata

• 数据值对于对象来说要先声明，否则新增属性无效（可以基于vm.$set处理）
• vm.arr[0]=xxx 改变数组中的某一项视图不会渲染，需要基于内置的方法，例如：push…
• 对象或者数组可以整体替换值实现数据变视图也变…

mustache（[ˈmʌstæʃ]） X子语法

valueJS表达式

常用的指令（directive）

v-modelv-html / v-text：取消X子语法刷新中的闪烁问题v-bind（缩写 :）v-oncev-if 和 v-showv-forfor in循环 & for of循环

• 遍历数据类型的范围
• 原型上方法遍历（或者数组新增的xxx:xxx属性遍历）
• ……
• Symbol.iteratoer：Array、Set、Map、String、Arguments、NodeList…v-on 事件绑定
• v-on:xxx
• methods ：和data类似，都会把方法挂载到vm实例上（this都是当前实例）
• @xxx
• @xxx=”func” & @xxx=”func($event,…)”

directive自定义指令

Vue.directive([指令名，省略v-], functiоn(el,bindings,vnode){}

• el当前元素bindings包含很多信息
• name：指令名，不包括 v- 前缀
• value：指令的绑定值
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用
• expression：字符串形式的指令表达式
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”
• modifiers：包含修饰符的对象。例如：my-directive.foo.bar 中，修饰符对象 { foo: true, bar: true }vnode虚拟DOM
• ctx = vnode.context 获取当前元素所在的上下文
• ctx[bindings.expression]=xxx 获取上下文中的表达式变量，并且把指定的值赋值给它钩子函数
• bind：当用户绑定指令时生效（只调一次）
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前（一个函数的方式就是把bind和update合在一起的写法）
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已X入文档中)小练习：创建一个自定义指令控制文本框的校验

事件修饰符

常规：.stop / .prevent / .once …按键：.enter 或者 .13 / .up / .down / .left / .right …组合修饰符…

表单元素的处理

普通文本框 或者 文本域单选框复选框下拉框小案例：全选和非全选

计算属性、过滤器、监听器

methods 普通方法filters 过滤器

• 只能应用到胡子语法和v-bind中
• 小练习：输入内容的单词首字母大写computed
• getter & setter
• 相对于普通方法来讲，计算属性是基于它们的响应式依赖进行缓存的
• 依赖data中的数据变量
• 小练习：输入内容的单词首字母大写
• 小练习：全选和非全选watch
• 当需要在数据变化时执行异步或开销较大的操作时应用监听器
• 小练习：全选和非全选
• 小练习：数据异步绑定的处理

data(){  return {    checked:false, //是否全选    checkModel:[]  }},watch:{  checkModel(){    if(this.checkModel.length==this.list.length){      this.checked=true;    }else{      this.checked=false;    }  }}…复制代码

class和style绑定

class的处理（对象语法、数组语法）内联样式的处理…

生命周期函数（钩子函数）

beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestory…

常用的属性方法

$set : 设置响应式数据$el : 挂载的元素$destroy : 销毁vue的实例；同时调用beforeDestroy destroyed$mount : 挂载真实DOM的方法$data : 响应式的对象$options: 是Vue的构造函数的参数$refs : 可以用来获取指定的元素对象 （非受控组件）$on : 订阅$emit : 发布$watch：监控…

案例：选项卡

案例：购物车计算器

案例：商城类别筛选

<hr>

双向数据绑定的实现原理

Object.defineProperty实现的底层原理

//observer:观察者functiоn observer(obj) {        if (obj && typeof obj === ‘object’) {                for (let key in obj) {                        if (!obj.hasOwnProperty(key)) break;                        defineReactive(obj, key, obj[key]);                }        }}functiоn defineReactive(obj, key, value) {        observer(value);        Object.defineProperty(obj, key, {                get() {                        return value;                },                set(newValue) {                        observer(newValue);                        if (value === newValue) return;                        value = newValue;                }        });}functiоn $set(data, key, value) {        defineReactive(data, key, value);}

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

<hr>

VUE中的组件（component）

组件的特点是：

每个组件就是一个自定义标签可复用方便维护方便拆分每个组件作用域隔离（互不干扰）有完整的生命周期有自己的响应式数据和各种方法（事件）…

1.全局组件 & 组件的基本语法

在任何组件中可以直接使用（不需要引入，直接在组件模板中调用即可） Vue.component(componentName,options)

组件名字中的一点规范

• kebab-case：只能调用
• PasalCase：既可类似前种方式调用，也可以方式调用调用组件的细节规范
• 采用双闭合方式
• 单闭合方式不符合w3c规范（只能识别一个）template
• 每个组件只能有一个根元素
• 模板字符串方式
• template标记方式slot插槽处理
• 基础操作
• 多插槽的指定data必须是一个函数，保证不同组件之间的数据互不干扰（返回的对象中初始化数据）…

<my-component>        <template v-slot:xxx 或者 #xxx>                珠峰培训        </template></my-component>{        templete:`<div>                <slot name=’xxx’></slot>        </div>`}

2.局部组件

创建组件：let componenName={…}基于components属性声明组件：想用哪个组件需要先声明使用组件

3.组件信息通讯之父传子：props属性传递

父组件调用到的时候

<my-component aa=’zhufeng’ :bb=’xxx’></my-component>

子组件中基于props声明需要接收的属性值

Vue.component(‘my-component’,{        props:[‘aa’,’bb’],        …})

props中声明的属性和data一样，是响应式数据，挂载到vm实例上，可控制视图渲染props中的一些细节问题

• 命名大小写：传递的是kebab-case格式，props中获取的是camelCase驼峰命名
• 指定属性的类型：props:{xxx:String,…}指定属性的默认值：props:{xxx:{type:String,default:’xxx’,required:true}}
• type如果是一个数组，意为指定的多类型皆可以
• default可以是一个函数，函数返回值是默认值
• validator自定义验证规则函数：必须符合函数中指定的规则，返回true/false
• 传递的属性值默认都是字符串格式，如果想要让传递的值是数字、布尔、数组、对象等格式，我们需要使用v-bind处理
• 样式和class自动合并问题

4.vue的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向X动到子组件中，但是反过来则不行。

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated父组件更新过程：父 beforeUpdate -> 父 updated销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。有两种常见的试图改变一个 prop 的情形 :

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

5.组件信息通讯之子改父：this.$emit

订阅自定义事件：调用组件的时候基于属性传递一个方法 （父）

<my-component @func=’xxx’></my-component>new Vue({        methods:{                xxx(value){                        //=>value是this.$emit时候传递的第二个参数值                }        }});

通知自定义事件执行 （子）

{        methods:{                xxx(){                        this.$emit(‘func’,10);                }        }}

也可以基于此方法实现兄弟组件（父子组件、隔代组件）之间的信息通信

let eventBus=new Vue; //=>创建事件总线//A组件eventBus.$on(‘xxxA’,this.func);//B组件eventBus.$emit(‘xxxA’);

6.基于ref实现父子组件信息通信

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，基于此可以快速获取和操作子组件中的数据

parent和children是获取组件和子组件的实例，只不过$children是一个数组集合，需要我们记住组件顺序才可以

7.基于provide和inject实现祖先与后代的通信

祖先组件基于provide注册需要供后代组件使用的数据

{        provide:{ //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理）                name:’zhufeng’,                year:10        },        …}

后代组件基于inject声明需要使用的数据并调取使用

{        inject:[‘name’],        methods:{                func(){                        let name=this.name;                }        }}

VUE中的TRANSITION动画

1. 什么情况下会用动画

条件渲染 v-if条件展示 v-show动态组件 例如：vue-router控制组件渲染…

2. 如何实现动画

修改元素的样式：style & class使用JS实现动画（前两周在某些场景下都需要自己直接X作DOM或者更加的麻烦）使用vue内置的transition & transition-group

3. transition的基础使用

v-enter：定义进入过渡的开始状态，在元素X入之前生效，在元素X入之后的下一帧移除v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素X入之前生效，在过渡/动画完成之后移除v-enter-to: 定义进入过渡的结束状态，元素X入之后下一帧生效 ，在过渡/动画完成之后移除v-leave: 定义离开过渡的开始状态，在离开过渡被触发时立刻生效，下一帧被移除v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除v-leave-to: 定义离开过渡的结束状态，在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除基于 transiton 标记中的 name 属性来进行动画样式区分

• .demo-enter 等自定义过渡类名（例如：结合animate.css使用）<transition
• enter-active-class=”animated xxx” leave-active-class=”animated xxx”

4.JАVASCRIPT中的动画钩子函数

Velocity.js函数

<transition @before-enter=”beforeEnter” @enter=”enter” @after-enter=”afterEnter” @before-leave=”beforeLeave” …></transition>methods:{         beforeEnter: functiоn (el,done) {           }, …}

5. transition-group 处理多组元素动画

如果在transition-group中使用v-for，需要设置:key唯一值小练习：关键词模糊匹配搜索

综合实战案例

1. 轮播图的实现

2. TASK OA任务管理系统（俗称TODO）

作者：张张-

链接：https://juejin.im/post/5daf2b925188256b6c3866ef

来源：掘金