巩固Vue

前沿

置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！重学巩固你的Vuejs知识体系，如果有哪些知识点遗漏，还望在评论中说明，让我可以及时更新本篇内容知识体系。欢迎点赞收藏！

谈谈你对MVC、MVP和MVVM的理解？

https://github.com/webVueBlog/interview-answe/issues/156

转角遇到Vuejs

你为啥学习Vuejs
前端开发的复杂化
Vuejs的特点
安装Vuejs
体验Vuejs
MVVM架构：data和Vue对象的分离，Vue中的MVVM

插值语法：Mustache，v-once，v-html，v-text，v-pre，v-block。
绑定属性：v-bind的介绍，v-bind的基础，v-bind的语法糖，绑定class，绑定样式。
计算属性
事件监听：v-on介绍，v-on基础，v-on参数，v-on修饰符
条件和循环：条件渲染，v-show指令，v-if和v-show对比
表单绑定：基本使用，v-model原理，其他类型，值绑定，修饰符。

组件化开发：

什么是组件化，Vue组件化开发思想

注册的步骤
全局和局部组件
父组件和子组件
注册组件语法糖
模板的分离写法
组件的其他属性
父级向子级传递
子级向父级传递
父子组件的访问
非父子组件通信

组件化高级语法：

插槽slot：编译作用域，为什么使用slot，slot的基本使用，slot的具名插槽，slot的作用域插槽。
动态组件
异步组件
组件声明周期

Vue Cli

什么是webpack
webpack和gulp对比
手动webpack的配置
Vue Cli是什么
Vue Cli依赖环境
Vue Cli的安装

网络封装

使用传统的Ajax是基于XMLHttpRequest(XHR)
使用jQuery-Ajax
Vue-resource
使用axios

axios的使用

了解axios：axios请求方式
发送请求，发送get请求，发送并发请求，axios全局配置，常见配置选项。
axios实例，为什么创建axios实例，如何创建axios实例，axios的封装。
axios的拦截器：请求和响应

vuejs原理相关：响应式原理，源码。

vue.js是什么

vue是一套用于构建用户界面的渐进式框架。
从自底向上逐层应用，核心库是只关注图层。
易于学习，便于与第三方库或既有项目整合。

Vue基础语法

对于基础知识需要掌握，简单写写✍

vue.js安装

直接CDN引入：

对于制作原型或学习

代码：

对于生产环境

代码：

# 最新稳定版
$ npm install vue

vue响应式初体验

声明式编程：

代码：

小案例-计算器

新的属性：methods，该属性是用于Vue对象中定义的方法。
新的指令：@click，该指令是用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法。

代码：


    当前计数{{counter}}

Vue中的MVVM

MVVM的思想

view是我们的DOM
Model是我们抽离出来的obj
ViewModel是我们创建的Vue对象实例

它们之间是如何工作的呢？

ViewModel通过Data Binding让obj中的数据实时在DOM中显示
ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据

el:类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM
data:类型：Object | Function
作用：Vue实例对应的数据对象
methods:类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

什么是Vue的生命周期

生命周期：☞ 事物从诞生到消亡的整个过程

release稳定版本
debug版本

Mustache语法也就是双大括号
插值操作
绑定属性
计算属性
事件判断
循环遍历
阶段案例
v-model

v-once指令的使用


 {{message}}
 {{message}}

v-once：

该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

v-html：

当我们从服务器请求到的数据本身就是一个HTML代码时

如果直接通过{{}}来输出，会将HTML格式进行解析，并且显示对应的内容。
可以使用v-html指令
该指令后跟上一个string类型
会将string的html解析处理并且进行渲染

v-text的作用和Mustache比较相似，独使用于将数据显示在界面中，一般情况下，接受一个string类型。


 
 {{message}}

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。


 {{message}}

v-cloak斗篷的意思。


 hello{{name}}

v-bind的介绍

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。


 vuejs

绑定class有两种方式：

对象语法
数组语法

对象语法：

用法一：直接通过{}绑定一个类
hello

用法二，传入多个值
hello

用法三：


用法四：
可以放在一个methods或者computed中
hello

v-bind动态绑定class，数组语法


 {{mesg}}
 {{mesg}}

v-bind动态绑定style

对象语法和数组语法两种绑定。

绑定方法：对象语法：

:style="{ color: currentColor, fontSize: fontSize + 'px' }"

style后面跟的是一个对象类型，对象的key是css属性名称，对象的value是具体赋的值，值可以来自于data中的属性。

绑定方法：数组语法：

style后面跟的是一个数组的类型，多个值，分割即可。

计算属性的基本属性

计算属性，写在实例的computed选项中：


 {{firstName}}{{lastName}}


 {{fullName}}

计算属性的缓存：

为什么使用计算属性这个东西？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

setter和getter

每个计算属性都包含一个getter和一个setter


 {{fullName}}
 {{firstName}}
 {{lastName}}

computed: {
    fullName: function() {
        return this.firstName+" "+this.lastName
    }

    // 计算属性一般是没有set方法，只读属性。
    fullName: {
        get: function() {
            return this.firstName + " " + this.lastName
        }
    }
}

const的使用

const的使用，在JavaScript中使用const修饰的标识符为常量，不可以再次赋值。

在es6开发中，优先使用const，只有需要改变一个标识符的时候才使用let。

在使用cost定义标识符，必须进行赋值。

常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

什么时候使用const呢？

当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。

const的使用：

const a=20;
a = 10; // 错误：不可以修改

const name; // 错误，const修饰的标识符必须赋值

let和var

块级作用域：

JS中使用var来声明一个变量，变量的作用域主要是和函数的定义有关。

对于其他块定义来说是没有作用域的，比如if/for等，开发中往往会引发一些问题。

// 监听按钮的点击
var btns = document.getElementsByTagName('button');
for(var i=0; i


let btns = document.getElementsByTagName('button');
for(let i=0;i

块级作用域
变量作用域：变量在什么范围内是可用的。
var func;
if(true) {
    var name = 'web';
    func = function() {
        console.log(name); // web
    }

    func(); // web
}

// name = 'it'
func(); // web -> it
console.log(name); // web -> it


没有块级作用域引起的问题，for的块级
var btns = document.getElementsByTagName('button');
for(var i=0; i

闭包：
var btns = document.getElementsByTagName('button');
for(var i=0; i

为什么闭包可以解决问题，因为函数是一个作用域。
对象的增强写法
属性初始化简写和方法的简写：
// 属性的简写
// es6前
let name = 'web'
let age = 12
let obj1 = {
    name: name,
    age: age,
}
console.log(obj1);
// es6后
let obj2 = {
    name, age
}
console.log(obj2)


// 方法的简写
// es6之前
let obj1 = {
    test: function() {
        console.log('obj1')
    }
}
obj1.test();

// es6后
let obj2 = {
    test() {
        console.log('obj2')
    }
}
obj2.test();


v-on基础
v-on:click="counter++"

 点击次数:{{counter}}
 
 


let app = new Vue({
 el: '#app',
 data: {
     counter: 0
 },
 methods: {
     btnClick(){
         this.counter++
     }
 }
})


v-on修饰符的使用

 
 web
 



Vue提供了一些修饰符：
.stop 调用event.stopPropagation()

.prevent 调用event.preventDefault()

.native 监听组件根元素的原生事件

.once 只触发一次回调


// 停止冒泡


// 阻止默认行为


// 阻止默认行为，没有表达式


// 串联修饰符


// 键修饰符，键别名


// 键修饰符，键代码


// 点击回调智慧触发一次



v-if,v-else-if,v-else
简单使用：

 优秀
 良好
 及格
 不及格



登录切换：

 
  用户账号：
  
 
 
  邮箱地址：
  
 
 






 
  用户账户
  
 

 
  用户邮箱
  
 
 





v-for遍历对象

 
  
   {{value}}-{{key}}-{{index}}
  
 





组件的Key属性
使用v-for时，给对应的元素或组件添加上一个:key属性。
key的作用主要是为了高效的更新虚拟dom。

数组中哪些方法是响应式的

push()
pop() 删除数组中的最后一个元素
shift() 删除数组中的第一个元素
unshift() 在数组最前面添加元素

splice()
sort()
reverse()


购物车





书籍名称
出版日期
价格
购买数量
操作




{{value}}






表单绑定v-model
vue中使用v-model指令来实现表单元素和数据的双向绑定。

 
 {{message}}



reduce作用对数组中所有的内容进行汇总。
JavaScript reduce() 方法
var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}


定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)


v-model的使用以及原理





v-model是语法糖，本质：

 v-bind绑定一个value属性
 v-on指令给当前元素绑定input事件

代码：





v-model:checkbox
复选框分为两种情况，单个勾选框和多个勾选框。
单个勾选框：
v-model即为布尔值。input的value并不影响v-model的值。
多个复选框：
当是多个复选框时，对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

 
  同意协议
 
 篮球
 台球



v-model:select
select分单选和多选两种情况
单选：只能选中一个值，多选：可以选择多个值。
 v-model结合select类型
和checkbox一样，select分单选和多选两种情况。
单选，只能选择一个值，v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中。
多选，可以选中多个值。v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。
// 选择一个值

您最喜欢的{{mySelect}}

// 选择多个值

您最喜欢的{{mySelects}}


input中的值绑定

 
 {{item}}



修饰符
lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。
一旦有数据发生改变对应的data中的数据就会自动发生改变。
 lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
 number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除
 trim修饰符可以过滤内容左右两边的空格

示例：

 
 {{message}}



什么是组件化

组件化是vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
任何的应用都会被抽象成一颗组件树

注册组件的基本步骤：

创建组件构造器
注册组件
使用组件

示例：
调用Vue.extend()方法创建组件构造器
调用Vue.component()方法，注册组件
在Vue实例的作用范围内使用组件


组件示例：








全局组件和局部组件

 Vue.extend()调用Vue.extend()创建一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板在使用到组件的地方，显示的html代码。
这种写法在Vue2.x的文档几乎看不到了。
 Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
注册组件的标签名，组件构造器。

示例：
组件标题


 
 
  
 



示例：

 


 







父组件和子组件

组件树


组件和组件之间存在层级关系
其中一种非常重要的关系就是父子组件的关系

示例：

 






 

// 注册局部组件的语法糖
const app = new Vue({
 el: '#app',
 data: {
     message: 'web'
 },
 components: {
     'cpn2': {
         template: `
         
          web
         
         `
     }
 }
})



vue简化了注册组件的方式，提供了注册的语法糖。
组件模板抽离的写法
vue提供了两种定义html模块内容：

使用



template标签

// 注册一个全局组件
Vue.component('cpn', {
 template: '#cpn'
})



组件可以访问vue实例数据吗

组件是一个单独的功能模块封装，有属于自己的html模板和自己的数据data。
组件对象有一个data属性，methods属性，这个data属性必须是一个函数，函数返回一个对象，对象内部保存着数据。

 







在 Vue 中，父子组件的关系
props向下传递，事件向上传递。
父组件通过 props给子组件下发数据，子组件通过事件给父组件发送消息。
props支持的数据类型：
String

Number

Boolean

Array

Object

Date

Function

Symbol


示例：
Vue.component('my-component',{
 props: {
     // 基础的类型检查
     propA: Number,
     // 多个可能的类型
     propB: [String, Number],
     // propC: {
         type: String,
         required: true
     },
     // 带有默认值的数字
     propD: {
         type: Number,
         default: 100
     },
     // 带有默认值的对象
     propE: {
         type: Object,
          default: function(){
              return {message: 'web'}
          }
     },
     // 自定义验证函数
     propF: {
         vfunc: function(value) {
             return value > 1
         }
     }
 }
})



子传父

代码：
this.$emit('item-click',item)


props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
自定义事件：

在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

自定义事件代码：

 
 点击次数




let app = new Vue({
 el: '#app',
 data: {
     total: 0
 },
 methods: {
     changeTotal(counter) {
         this.total = counter
     }
 },
 components: {
     'child-cpn': {
         template: '#childCpn',
         data(){
             return{
                 counter: 0
             }
         },
         methods: {
             increment(){
                 this.counter++;
                 this.$emit('increment', this.counter)
             },
             decrement(){
                 this.counter--;
                 this.$emit('decrement',this.counter)
             }
         }
     }
 }
})


父子组件的访问方式：$children 
有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问父组件。

父组件访问子组件，使用$children或者$refs 
子组件访问父组件，使用$parent 

对于$children的访问：

 this.$children是一个数组类型，它包含所有子组件对象。
通过遍历，取出所有子组件的message状态。

示例：

 


// 父组件template


// 子组件

// 子组件


Vue.component('parent-cpn',{
 template: '#parentCpn',
 methods: {
     showChildCpn(){
         for(let i=0; i

父子组件的访问方式：$parent 
子组件中直接访问父组件，可以通过$parent

虽然可以通过$parent来访问父组件，但是尽量不要这样做
子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。


父子组件的访问方式$refs

$children的缺陷：

通过$children访问子组件，是一个数组类型，访问其子组件要通过索引值。
子组件过多时，需要拿其中一个时，不能确定它的索引值，还可能发生变化。
获取其中一个特定的组件，可以使用$refs 

$refs的使用：

 $refs和ref指令通常一起使用
通过ref给某个子组件绑定一个特定的id 
通过this.$refs.id可以访问到该组件

示例：




show() {
    console.log(this.$refs.child1.message);
    console.log(this.$refs.child2.message);
}



看看一个.vue文件项目








三层部分：
slot插槽的使用
vue中的代码slot是什么呢，它叫插槽，元素作为组件模板之中的内容分发插槽，传入内容后元素自身将被替换。
v-slot用法：

默认插槽
具名插槽
作用域插槽
 slot以及slot-scope的用法：子组件编写，父组件编写

默认插槽
子组件：
// 子组件



slot基本使用

在子组件中，使用可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。

子组件定义一个插槽：

 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示改内容。

示例：

 
 
  web
 






使用具名插槽

给slot元素添加一个name属性


示例：

 // 没有任何内容
 

 // 传入某个内容
 
  left
 

 
  left

  center

  right







编译作用域

Vue实例属性：
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
父组件替换插槽的标签，但是内容由子组件来提供。
模块化开发
什么是模块化，将一组模块以正确的顺序拼接到一个文件中的过程，模块是实现特定功能的一组属性和方法的封装。
利用构造函数封装对象
function web() {
    var arr = [];
    this.add = function(val) {
        arr.push(var)
    }
    this.toString = function() {
        return arr.join('')
    }
}
var a = new web();
a.add(1); // [1]
a.toString(); // "1"
a.arr // undefined


示例：
var ModuleA = (function(){
    // 定义一个对象
    var obj = {}
    // 在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info) {
        console.log(info)
    };
    // 将对象返回
    return obj
}


if(ModuleA.flag) {
    console.log('web')
}

ModuleA.myFunc('webweb')


常见的模块化规范：
CommonJS,AMD,CMD,ES6中的Modules
什么是AMD，异步模块定义，它是在浏览器端实现模块化开发的规范，但是该规范不是原生js支持的，使用AMD规范进行开发的时候需要引入第三方的库函数，就是RequireJS。
RequireJS解决了多个js文件可能有依赖的关系，被依赖的文件需要早于依赖它的文件加载到浏览器；js加载的时候浏览器会停止页面渲染，加载文件越多，页面就会失去响应时间越长。
CMD是什么，它是通用模块定义，解决的问题和AMD一样，不过在模块定义方式和模块加载时机上不同，CMD需要额外的引入第三方的库文件SeaJS。

JavaScript模块化编程


可以解决项目中的全局变量污染问题
开发效率高，利于多人协同开发
职责单一，方便代码复用和维护
解决了文件的依赖问题


那么什么是模块化呢

将一个项目按照功能划分，理论上一个功能一个模块，互不影响，在需要的时候载入，尽量遵循高内聚低耦合。
了解CommonJS
CommonJS 是一种思想,本质上是可复用的JavaScript,它导出特定的对象，提供其它程序使用。
使用module.exports和exports.obj来导出对象，并在需要它的程序中使用require('module')加载。
模块化的核心就是：导入和导出
导出：CommonJS
module.exports = {
    flag: true,
    test(a,b) {
        return a+b
    },
    demo(a,b) {
        return a*b
    }
}


导入：CommonJS
// CommonJS模块
let {test, demo, flag} = require('moduleA');

// =>
let ma = require('moduleA');
let test = ma.test;
let demo = ma.demo;
let flag = ma.flag;


因为网站开发越来越复杂，js文件又很多，就会出现一些问题：

变量名冲突
文件依赖复杂度高
页面加载过多，不利于维护

CommonJS，定义模块，一个单独的js文件就是一个模块，每个模块都有自己单独的作用域，在该模块内部定义的变量，无法被其他模块读取，除了定义为global对象的属性。
模块的导出：exports和module.exports
模块的导入：require

在node中，每个模块内部都有要给自己的module对象
在module对象中，有一个成员exports也是一个对象
通过exports对象导出当前方法或变量，也可通过module.exports导出
 node简化了操作，exports等于module.exports，相当于var exports = module.exports 


es模块的导入和导出

export function add(num1, num2) {
    return num1 + num2
}


export function accString(param) {
    if (param == 0) {
        return '关'
    }else if(param == 1) {
        return '开'
    }
}

import {
        accString
    } from '../../utils'


const name = 'web'

export default name


export default
一个模块中包含某个功能，如果不希望给功能命名，可以让导入者自己来定：
export default function(){
    console.log('web')
}


使用：
import myFunc from '../web.js'

myFunc()



export default在同一个模块中，不允许同时存在多个

import使用
export指令导出了模块对外提供的接口
import指令用于导入模块中的内容
import {name, age} from './web.js'


通过*可以导入模块中所有所有的export变量
import * as web from './web.js'

console.log(web.name);


生命周期
首先：new Vue(),new一个Vue的实例，Observe data数据查看，init Events绑定事件，created执行created方法，判断是否有el属性，如果没有，vm.$mount(el)表示处于未挂载状态，可以手动调用这个方法来挂载。判断是否有template属性。
如果有el属性，判断是否有template属性。
实例化期和加载期
 创建期间的生命周期函数：beforeCreate 和 created，beforeMount 和 mounted。
beforeCreate在实例初始化后，数据观测data observer和event/watcher事件配置之前被调用。
更新期
运行期间的生命周期函数：beforeUpdate 和 updated
created实例已经创建完成后被调用。
实例已完成以下的配置：数据观测data observer，属性和方法的运算，watch/event事件回调。
挂载阶段还没开始，$el属性目前不可见。
beforeMount在挂载开始之前被调用，相关的render函数首次被调用。mounted，vm.$el已经挂载在文档内，对已有dom节点的操作可以在期间进行。beforeUpdate数据更新时调用，发生在虚拟dmo重新渲染和打补丁之前。updated当这个钩子被调用时，组件dom已经更新，所以你现在可以执行依赖于dom的操作。activated，deactivated，beforeDestroy，destroyed。实例销毁之前调用，vue实例销毁后调用。
卸载期
销毁期间的生命周期函数：beforeDestroy 和 destroyed

实例生命周期钩子

每个vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听，编译模板，将实例挂载到dom并在数据变化时更新dom等，同时在这个过程中也会运行一些叫做生命周期钩子的函数。
用于给用户在不同阶段添加自己代码的机会。
beforeCreate，此时的data是不可见的
data() {
    return {
        a: 1
    }
},
beforeCreate() {
    // red
    console.log(this.a); // 看不见
}


created实例已经创建完成后被调用，这个时候你看不见你页面的内容，实例已完成表示：数据观测data observer，属性和方法的运算，watch/event事件回调。
这个时候挂载阶段还没开始，$el属性目前不可见。
export default {
    data() {
        return {
            a: 1
        }
    },
    beforeCreate() {
        console.log(this.a);
    },
    created() {
        // red
        console.log(this.a);
        console.log(this.$el);
        // 此时data数据里面的a可见，this.$el不可见
    }
}


beforeMount在挂载开始之前被调用，相关的render函数首次被调用。
export default{
    data() {
        return {
            a: 1
        }
    },
    beforeCreate() {
        console.log(this.a); // 不可见
    },
    created() {
        console.log(this.a);
        console.log(this.$el); // 不可见
    },
    beforeMount() {
        console.log(this.$el); // 不可见
    }
}


mounted：
export default {
    data() {
        return {
            a: 1
        }
    },
    mounted() {
        console.log(this.$el); // 此时$el 可见
    }
}


beforeUpdate钩子，dom更新之前调用：
beforeUpdate() {
    console.log(this.a);
}

// document.getElementById("web").innerHTML


updated钩子，dom更新之后调用：
updated() {
    console.log(this.a);
}

// document.getElementById("web").innerHTML


activated和deactivated（组件）
activated() {
    console.log("组件使用了");
},

deactivated() {
    console.log("组件停用了");
Data to Drag},


keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom。
 包裹动态组件时，会缓存不活动的组件实例，而不会销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。
当组件在内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应指定。
它的使用是因为我们不希望组件被重新渲染而影响使用体验，或者是性能，避免多次渲染降低性能。缓存下来，维持当前得状态。
场景：

商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
订单列表跳转到订单详情，返回，等等场景。

keep-alive生命周期：
初次进入时：created > mounted > activated；退出后触发 deactivated；再次进入：会触发activated；事件挂载的方法等，只执行一次的放在mounted中；组件每次进去执行的方法放在 activated 中。
app.vue父组件：





beforeDestroy和destroyed
beeforeDestroy类型为function，详细：实例销毁之前调用，在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
destroyed类型为function，详细：vue实例销毁后调用，调用后，vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
beforeRouteEnter和beforeRouteLeave
beforeRouteEnter() {
    console.log('beforeRouteEnter')
},

beforeRouteLeave() {
    console.log('beforeRouteLeave')
}


vue路由使用的，路由进去和路由离开的时候添加的。
created() {
    console.log('开始执行created钩子函数')
    // 获取data数据
    console.log('获取created属性'+this.value)
    // 获取页面元素
    console.log(this.$refs['example'])
    this.$nextTick(()=>{
        console.log('执行created创建的this.$nextTick()函数')
    })
},

mounted() {
    console.log('开始执行mounted钩子函数')
    // 获取挂载数据
    console.log('获取挂载数据--'+this.$refs['example'].innerText)
    this.$nextTick(()=>{
        console.log('执行mounted创建的this.$nextTick()函数')
    })
},

methods: {
    // 更新数据
    updateDate(){

    },
    get(){
        this.value='更新data内的value属性值'
        // 获取页面元素数据
        console.log(this.$refs['example').innerText)
        this.$nextTick(()=>{
          console.log(this.$refs['example'].innerText)  
        })
    }
}


var vm=new Vue({})表示开始创建一个Vue的实例对象，init events&liftcycle表示刚初始化了一个vue空的实例对象，这个时候，对象身上，只有默认的一些生命周期函数和默认事件，其他东西都没有创建，beforeCreate生命周期函数执行的时候，data和methods中的数据都没有初始化。在created中，data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，只能在created中操作。然后vue开始编辑模板，把vue代码中的那些指令进行执行，最终在内存中生成一个编译好的最终模板字符串，渲染为内存中的dom，此时只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。beforeMount函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去。create vm.$el and replace 'el' with it这一步是将内存中编译好的模板，真实的替换到浏览器的页面中去。mounted，只要执行完了mounted，就表示整个vue实例已经初始化完了。此时，组件从创建阶段进入到了运行阶段。
beforeUpdate执行的时候，页面中显示的数据还旧的，而data数据是最新的，页面尚未和最新的数据保持同步。updated事件执行的时候，页面和data数据已经保持同步了，都是新的。virtual dom re-render and patch执行，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存dom树，当最新的内存dom树被更新之后，会把最新的内存dom树，重新渲染到真实的页面中，完成数据从data到view的跟新。
beforeDestroy钩子函数执行时，vue实例就从运行阶段，进入到了销毁阶段。此时的实例还是可用的阶段，没有真正执行销毁过程。destroyed函数执行时，组件已经被完全销毁了，都不可用了。
vue面试题
谈一谈你对mvvm的理解
双向绑定的过程
视图view，路由-控制器Controller，数据Model
view->dom，viewModel，Model数据
传统的mvc指用户操作会请求服务器端路由，路由会调用对应的控制器来处理，控制器会获取数据，将结果返回给前端，让页面重新渲染。
mvvm，对于传统的前端会将数据手动渲染到页面上，mvvm模式不需要用户收到操作dom元素，将数据绑定到viewModel层上，会自动将数据渲染到页面中，视图变化会通知viewModel层更新数据。
Vue响应式原理

 vue内部是如何监听message数据的改变
当数据发生改变，vue是如何知道要通知哪些人，界面发生刷新

核心：

 Object.defineProperty，监听对象属性的改变
发布订阅者模式

代码：
Object.keys(obj).forEach(key => {
 let value = obj[key]

 Object.defineProperty(obj, key, {
    set(newValue) {
        // 监听改变
        value = newValue
    },
    get() {
        return value
    }
 })
})

obj.name = 'web'


发布者订阅者
class Dep {
    constructor() {
        this.subs = []
    }
}

class Watcher {
    constructor(name) {
        this.name = name;
    }
}


对象的Object.defindeProperty中的访问器属性中的get和set方法

把数据转化为getter和setter，建立watcher并收集依赖。

说明：
watcher通过回调函数更新view;observer观测data数据，通过get通知dep收集watcher，dep通过notify()通知watcher数据更新，watcher通过addDep()收集依赖。
Observer:用于监听劫持所有data属性，dep,watcher,view，Compile解析el模板中的指令。
依照下图（参考《深入浅出vue.js》）
首先从初始化data数据开始，使用Observer监听数据，个体每个数据属性添加Dep，并且在Data，有两个getter，setter。在它的getter过程添加收集依赖操作，在setter过程添加通知依赖的操作。
在解析指令或者给vue实例设置watch选项或者调用$watch时，生成对应的watcher并收集依赖。
Data通过Observer转换成了getter/setter的形式，来对数据追踪变化。
修改对象的值的时候，会触发对应的setter，setter通知之前依赖收集得到的 Dep 中的每一个Watcher，告诉它们值改变了，需要重新渲染视图。
数据双向绑定原理
什么是响应式的原理

核心：Object.defineProperty 
默认vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集，如果属性发生变化会通知相关依赖进行更新操作。

initData初始化用户传入的data数据，new Observer将数据进行观测，this.walk(value)进行对象的处理，defineReactive循环对象属性定义响应式变化，Object.defineProperty，使用Object.defineProperty重新定义数据。
使用使用Object.defineProperty重新定义数据的每一项。
Object.defineProperty(obj,key,{
 enumerable: true,
 configurable: true,
 get: function reactiveGetter(){
     const value=getter?getter.call(obj):val
     if(Dep.target){
         dep.depend()
         if(childOb){
             childOb.dep.depend()
             if(Array.isArray(value)){
                 dependArray(value)
             }
         }
     }
     return value
 },
 set: function reactiveSetter(newVal) {
     const value=getter?getter.call(obj).val
     if(newVal === value || (newVal !== newVal && value !==value)){
         return
     }
     if(process.env.NODE_ENV !== 'production' && customSetter){
         customSetter()
     }
     val = newVal
     childOb = !shallow && observe(newVal)
     dep.notify()
 }
})


vue中式如何检测数组变化
使用函数劫持的方式，重写了数组的方法，vue将data中的数组进行了原型链的重写，指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖跟新，如果数组中包含着引用类型，会对数组中的引用类型再次进行监控。
initData初始化用户传入的data数据，new Observer将数据进行观测，protoAugment(value,arrayMethods)将数据的原型方法指向重写的原型。

对数组的原型方法进行重写
 observerArray深度观察数组中的每一项

代码：
if(Array.isArray(value)){
    // 判断数组
    if(hasProto){
        protoAugment(value, arrayMethods)// 改写数组原型方法
    }else{
        copyAugment(value,arrayMethods,arrayKeys)
    }
    this.observeArray(value)
    //深度观察数组中的每一项
}else{
    this.walk(value) 
    // 重新定义对象类型数据
}

function protoAugment(target, src: Object){
    target.__proto__ = src
}

export const arrayMethods = Object.create(arrayProto)
const methodsToPatch=[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

methodsToPatch.forEach(function (method){
    const original = arrayProto[method]
    def(arrayMethods, method, function mutator(...args){
        const result = original.apply(this.args)
        const ob = this.__ob__
        let inserted
        switch(method) {
            case 'push':
            case 'unshift':
            inserted = args
            break
            case 'splice':
            inserted = args.slice(2)
            break
        }
        if(inserted) ob.observerArray(inserted)
        // 对插入的数据再次进行观测
        ob.dep.notify()
        // 通知视图更新
        return result
    }
}

observeArray(items: Array) {
    for(let i=0, l = items.length; i<1; i++) {
        observe(item[i])
        // 观测数组中的每一项
    }
}


为什么vue采用异步渲染
如果不采用异步更新，每次更新数据都会对当前组件进行重新渲染，为了性能考虑。
dep.notify()通知watcher进行更新操作，subs[i].update()依次调用watcher的update，queueWatcher将watcher去重放到队列中，nextTick(flushSchedulerQueue)异步清空watcher队列。
nextTick实现原理
微任务高于宏任务先执行
nextTick方法主要使用了宏任务和微任务，定义了一个异步方法，多次调用了nextTick会将方法存入到队列中，通过这个异步方法清空当前队列。
nextTick方法是异步方法。
原理：nextTick(cb)调用nextTick传入cb，callbacks.push(cb)将回调存入数组中，timerFunc()调用timerFunc，返回promise支持promise的写法。
webpack
什么是webpack，webpack是一个现代的JavaScript应用的静态模块打包工具。
webpack是前端模块化打包工具
安装webpack需要安装node.js,node.js自带有软件包管理工具npm
全局安装
npm install [email protected] -g


局部安装
npm install [email protected] --save-dev


webpack.config.js固定名文件：
const path = require("path")
module.exports = {
    entry: './src/main.js',
    output: {
        patch: './dist',
        filename: ''
    },
}


package.json
{
    "name": 'meetwebpack',
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo ..."
    },
    "author": "",
    "license": "ISC"
}


什么是loader
loader是webpack中一个非常核心的概念
loader使用过程：

通过npm安装需要使用的loader 
在webpack.config.js中的moudules关键字下进行配置

package.json中定义启动
{
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.6.0"
    }
}


 webpack的介绍
webpack可以看做是模块打包机，它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，将其打包为合适的格式以供浏览器使用。
可以实现代码的转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布。
安装本地的webpack
webpack webpack-cli -D


初始化：
yarn init -y


yarn add webpack webpack-cli -D


webpack可以进行0配置，它是一个打包工具，可以输出后的结果（Js模块），打包（支持js的模块化）
运行webpack命令打包
npx webpack


webpack.config.js，webpack是node写出来的node的写法：
let path = require('path')
console.log(path.resolve('dist');

module.exports = {
    mode: 'development',
    // 模式，默认两种，production，development
    entry: '' // 入口
    output: {
        filename: 'bundle.js',
        // 打包后的文件名
        path: path.resolve(__dirname, 'build'),
        // 把相对路径改写为绝对路径
    }
}


自定义，webpack.config.my.js
使用命令：
npx webpack --config webpack.config.my.js


package.json:
{
    "name": 'webpack-dev-1',
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "build": "webpack --config webpack.config.my.js"  
    },
    "devDependencies": {
        "webpack": "^4.28.3",
        "webpack-cli": "^3.2.0"
    }
}


使用命令：
npm run build

// npm run build -- --config webpack.config.my.js



开发服务器的配置

代码：
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
console.log(path.resolve('dist');

module.exports = {
    devServer: {
      // 开发服务器的配置  
      port: 3000,
      // 看到进度条
      progress: true,
      contentBase: "./build",
      compress: true
    },
    mode: 'development',
    // 模式，默认两种，production，development
    entry: '' // 入口
    output: {
        filename: 'bundle.js',
        // 打包后的文件名
        path: path.resolve(__dirname, 'build'),
        // 把相对路径改写为绝对路径
    },
    plugins: [
        // 数组，所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify:{
                removeAttributeQuotes: true,//删除“”
                collapseWhitespace: true, // 变成一行

            },
             hash: true
        })
    ],
    module: {
        // 模块
        rules: [
            // 规则
            {test: /\.css$/, use: [{
                loader: 'style-loader',
                options: {
                    insertAt: 'top'
                }
            },'css-loader'] },
        ]
    }
}


output: {
    filename: 'bundle.[hash:8].js',// 打包文件名后只显示8位
}


{
    "name": 'webpack-dev-1',
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "build": "webpack --config webpack.config.my.js",
      "dev": "webpack-dev-server"
    },
    "devDependencies": {
        "webpack": "^4.28.3",
        "webpack-cli": "^3.2.0"
    }
}


yarn add css-loader style-loader -D


样式：

 style-loader将模块的导出作为样式添加到dom中
 css-loader解析css文件后，使用import加载，并且返回css代码
 less-loader加载和转译less文件
 sass-loader加载和转译sass/scss文件
 postcss-loader使用PostCSS加载和转译css/sss文件
 stylus-loader加载和转译Stylus文件

style-loader安装：
npm install style-loader --save-dev


用法：
建议将style-loader与css-loader结合使用
component.js
import style from './file.css'



 css-loader只负责将css文件进行加载
 style-loader负责将样式添加到dom中
使用多个loader时，是从右到左

代码：
// webpack.config.js
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}



css文件处理：style-loader

安装style-loader
npm install --save-dev style-loader


style-loader需要放在css-loader的前面，webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。
webpack.config.js的配置如下：
const path = require('path')

module.exports = {
    // 入口:可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可。
    entry: './src/main.js',
    // 出口：通常是一个对象，里面至少包含两个重要属性，path和filename
    output:{
        path: path.resolve(__dirname, 'dist'), // 注意：path通常是一个绝对路径
        filename: 'bundle.js'
    },
    module: {
        rules: {
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        }
    }
}


 webpack less文件处理
安装：
npm install --save-dev less-loader less


示例：
将css-loader,style-loader,less-loader链式调用，可以把所有样式立即应用于dom。
// webpack.config.js
module.exports = {
    ...
    rules: [{
        test: /\.less$/,
        use: [{
            loader: 'style-loader'
        },{
            loader: 'css-loader'
        },{
            loader: 'less-loader'
        }]
    }]
}



图片文件处理

css normal代码：
body {
    background: url("../img/test.jpg")
}


url-loader
npm install --save-dev url-loader


用法
url-loader功能类似于file-loader，但是在文件大小低于指定的限制时，可以返回一个DataURL
import img from './image.png'


webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
}


img，文件要打包到的文件夹
name，获取图片原来的名字，放在该位置
hash:8，为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext，使用图片原来的扩展名
es6转es5的babel
如果希望es6转成es5，那么就需要使用babel
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015


配置webpack.config.js文件：
{
    test: /\.m?js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['es2015']
        }
    }
}


使用vue
如何在我们的webpack环境中集成vue.js
代码：
npm install vue --save



 runtime-only代码中，不可以有任何的template 
 runtime-compiler代码中，可以有template因为有compiler可以用于编译template 

spa(simple age web application)->vue-router（前端路由）
.vue文件封装处理
安装vue-loader和vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev


认识webpack的plugin

 plugin是什么？


 plugin是插件的意思，通常用于对某个现有的架构进行扩展。
 webpack中的插件，是对webpack现有功能的各种扩展。


 loader和plugin的区别


 loader主要用于转换某些类型的模块，它是一个转换器。
 plugin是插件，它是对webpack本身的扩展，是一个扩展器。


 plugin的使用过程：


通过npm安装需要使用的plugins 
在webpack.config.js中的plugins中配置插件

webpack.config.js的文件：
查看bundle.js文件的头部：
Vue Cli详解
什么是vue cli，Command-Line Interface，命令行界面，俗称脚手架，vue cli是一个官方发布的项目脚手架。使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。
vue cli的使用
安装vue脚手架
npm install -g @vue/cli


vuecli2初始化过程
代码：
vue init webpack vuecli2test



根据名称创建一个文件夹，存放之后项目的内容，该名称会作为默认的项目名称，但是不能包含大写字母等
 Project name 项目名称，不能包含大写
 Project description项目描述
 Author作者信息
Vue build``runtime
 Install vue-router``no是否安装等


目录结构详解

build``config 是 webpack相关配置,node_modules 是依赖的node相关的模块，src是写代码地方。 .babelrc是es代码相关转换配置，.editorconfig项目文本相关配置，.gitignore``git仓库忽略的文件夹配置，.postcssrc.js为css相关转化的配置。
.editorconfig
前端模块化：
为什么使用模块化，简单写js代码带来的问题，闭包引起代码不可复用，自己实现了简单的模块化，es中模块化的使用：export和import。
npm install @vue/cli -g


npm clean cache -force


vue cli2初始化：
vue init webpack my-project


vue cli3初始化项目：
vue create my-project


箭头函数的使用和this
箭头函数，是一种定义函数的方式

定义函数的方式：function 

const a = function(){

}



对象字面量中定义函数

const obj = {
    b: function() {

    },
    b() {

    }
}



箭头函数

const c = (参数列表) => {

}
const c = () => {

}



箭头函数参数和返回值

代码：
const sum = (num1, num2) => {
    return num1 + num2
}

const power = (num) => {
    return num * num
}

const num = (num1,num2) => num1 + num2


const obj = {
    a() {
        setTimeout(function() {
            console.log(this); // window
        })
        setTimeout(()=>{
          console.log(this); // obj对象 
        })
    }
}


路由，，vue-router基本使用，vue-router嵌套路由，vue-router参数传递，vue-router导航守卫。
路由是一个网络工程里面的术语，路由就是通过互联的网络把信息从源地址传输到目的地址的活动。
路由器提供了两种机制：路由和转送。路由是决定数据包从来源到目的地的路径，转送将输入端的数据转移到合适的输出端。路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表，决定了数据包的指向。
后端路由：后端处理url和页面之间的映射关系。
前端路由和后端路由，前端渲染和后端渲染
vue-router和koa-router的区别：
vue-router是前端路由，koa-router是后端路由。
vue-router前端路由原理：
前端路由主要模式：hash模式和history模式。
路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

前后端渲染之争

url中的hash和html5的history 
前端路由的核心是改变url，但是页面不进行整体的刷新。单页面，其实spa最重要的特点就是在前后端分离的基础上加了一层前端路由。就是前端来维护一套路由规则。
url的hash
url的hash是锚点#,本质上是改变window.location的href属性。直接赋值location.hash来改变href，但是页面不发生刷新。
html5的history模式：pushState
html5的history模式：replaceState
html5的history模式：go
history.go()
history.back()等价于history.go(-1)
history.forward()等价于history.go(1)
安装vue-router
npm install vue-router --save



导入路由对象，并且调用Vue.use(VueRouter) 
创建路由实例，并且传入路由映射配置
在Vue实例中挂载创建的路由实例

代码：
// 配置路由相关的信息
import VueRouter from 'vue-router'
import vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'

// 通过Vue.use(插件),安装插件
Vue.use(VueRouter)

// 配置路由和组件之间的应用关系
const routes = [
 {
     path: '/home',
     component: Home
 },
 {
     path: '/about',
     component: About
 }
]

// 创建VueRouter对象
const router = new VueRouter({
 routes
})

// 将router对象传入到`Vue`实例
export default router


main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})


使用vue-router的步骤

创建路由组件
配置路由映射：组件和路径映射关系
使用路由：通过和 

代码：
组件components
// home














App.vue

巩固Vue

前沿

转角遇到Vuejs

目录：

起步

组件化开发：

组件化高级语法：

Vue Cli

网络封装

vue.js是什么

Vue基础语法

vue.js安装

vue响应式初体验

小案例-计算器

当前计数{{counter}}

Vue中的MVVM

什么是Vue的生命周期

{{message}}

{{message}}

{{message}}

hello{{name}}

v-bind的介绍

hello

hello

hello

{{mesg}}

{{mesg}}

计算属性的基本属性

{{firstName}}{{lastName}}

{{fullName}}

setter和getter

const的使用

块级作用域

对象的增强写法

v-on基础

点击次数:{{counter}}

v-if,v-else-if,v-else

v-for遍历对象

组件的Key属性

购物车

表单绑定v-model

{{message}}

v-model的使用以及原理

v-model:checkbox

v-model:select

v-model结合select类型

input中的值绑定

修饰符

{{message}}

什么是组件化

全局组件和局部组件

父组件和子组件

web

组件模板抽离的写法

web

点击次数

父子组件的访问方式：$children

我是子组件1

我是子组件2

父子组件的访问方式：$parent

slot插槽的使用

模块化开发

生命周期

vue面试题

谈一谈你对mvvm的理解

Vue响应式原理

什么是响应式的原理

vue中式如何检测数组变化

为什么vue采用异步渲染

nextTick实现原理

webpack

webpack的介绍

webpack less文件处理

es6转es5的babel

使用vue

认识webpack的plugin

Vue Cli详解

vuecli2初始化过程

箭头函数的使用和this

前端路由和后端路由，前端渲染和后端渲染

`v-model`结合`select`类型

父子组件的访问方式：`$children`

父子组件的访问方式：`$parent`

谈一谈你对`mvvm`的理解

`webpack`的介绍

`webpack` less文件处理

url中的`hash`和`html5`的`history`