vue 梳理-面试速览此博文梳理来源为尚硅谷 vue教程 Vue 是什么 Vue 是一套用于构建用户界面的渐进式

此博文梳理来源为尚硅谷 vue教程

Vue 是什么

Vue 是一套用于 构建用户界面 的 渐进式 JS框架。

构建用户界面：将数据转换为界面

渐进式：对于简单应用只需要轻量小巧的核心库；对于复杂应用可引入vue插件

Vue 的特点

组件化
声明式编码，无需直接操作DOM

标题	内容	备注
声明式编码	vue模板语法	无需直接操作DOM
命令式编码	原生JS	直接操作DOM

虚拟DOM + Diff 算法

diff 是针对新旧虚拟DOM 的比较

Vue 模板语法

主要有插值语法和指令语法两大类

分类	常用形式	作用	备注
插值语法	双花括号`{{ }}`	用于解析标签体 `<h1>hello, {{name}}</h1>`	可读取data中所有属性
指令语法以`v-`开头	v-if 控制元素显示隐藏 v-on 简写@ 给元素添加事件 v-bind 简写: 绑定元素的属性 v-model 双向绑定 v-for 遍历元素	用于解析标签(包括标签属性标签体内容、绑定事件) `<a v-bind:href="school.url">`	动态绑定属性`v-bind:`简写为`:`

MVVM架构

把一堆乱数据，通过VM视图模型，转换为DOM页面结构。优势是View和Model之间是双向数据传递的，视图改变数据也随之改变。

Model-View-ViewModel

标题	内容	备注
Model	数据层	存储数据及对数据的处理CRUD
View	视图层	UI 用户界面
ViewModel	业务逻辑层	一切 JS 可视为业务逻辑

// View 视图：模板代码
<div id="root">
  <h1>hello, {{}}</h1>
</div>

// ViewModel 视图模型：Vue实例
// vm 上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
const vm = new Vue({   
    el:'#root',
    data(){
      return{
        // Model 模型：data中的数据；data中所有的属性，最后都出现在 vm 上
        name:'jianlong'
      }
    }

创建 Vue 实例

<script type="text" src="../js/vue.js"></script>

// 容器, 称为 Vue 模板, 容器与实例是一一对应的关系
<div id="root">    
    <h1>hello, {{name}}</h1>   
</div>

// 创建实例, 并传入一个配置对象
const vm = new Vue({
    // 指定容器的 element 法（用于指定当前Vue实例为那个容器服务）
    el:'#root',
    // data 函数返回一个对象, 用于存储数据，数据供el指定的容器去使用
    data(){
      return{ 
        name:'jianlong'
      }
    }
    // 指定容器的 $mount 方法
    vm.$mount('#root')
})

Vue解析流程

先有的容器，然后有的实例，实例开始工作时会发现el指定的容器并拿过来，解析Vue模板中是否有设置的语法，若有就把实例中对应的数据替换掉模板并生成新的标签，并把解析完的内容重新放到页面上。

vue的响应式原理

底层是通过Object.defineProperty()实现的，在中间做了一些监听的机制，订阅发布者模式，结合dep更新的机制去实现的响应式。

vue里做响应式更新数据在哪里定义

在data中定义，不在data中定义的数据是非响应式的，也有一种方式可以让其变为响应式的，通过加vue的语法糖$set把他强制变成响应式即可，或者加一个手写的get方法、set方法。

怎么写get方法

利用JS原生的Object.defineProperty对他的变量的修改、变量的获取去做监听，监听到之后绑定响应的事件。

vue 数据相关概念

数据绑定

// school.url 与 href 属性 两者通过 v-bind: 完成了绑定关系
<a v-bind:href="school.url">

// 单向数据绑定
<div id="root">
<input type="text" v-bind:value="name">  
</div>

// 双向数据绑定(适用于 表单类 元素, 都有 value 值)
<div id="root">
<input type="text" v-model:value="name">  
</div>

分类	指令语法	内容
单向数据绑定	`v-bind:value` 可简写为`:value`	数据从data流向页面
双向数据绑定	`v-model:value` 可简写为`v-model`	数据从data流向页面还可从页面流向data

数据代理

`Object.defineproperty()`方法

（以下简称Ob方法）JS原生用于给一个对象添加属性。

-	内容
对象直接添加属性	属性的值可任意修改
`Ob`方法	可对属性进行限制

let person = {
    name:'张三',
    sex:'男',
}
// 参数1: 对象  参数2: 新属性名 参数3:配置项(分为基本和高级)
Object.defineProperty(person, 'age', {
  value:18,
  enumerable:true,   // 控制属性是否可以 枚举，默认值是false
  writable:true,     // 控制属性是否可被 修改，默认值是false
  configurable:true, // 控制属性是否可被 删除，默认值是false
})

`getter`和`setter`

let number = 18
let person = {
  name:'张三',
  sex:'男',
}

Object.defineProperty(person, 'age', {
  // 当有人读取 person 的 age 属性时，get 函数就会被调用，且返回值就是 age 的值
  // get:function(){} get是属性名，属性值是一个函数
  get(){
    return number  
  },
  // 当有人修改 person 的 age 属性时，set 函数就会被调用，且会收到修改的具体值
  set(value){
    number = value
  },
})

通过Ob方法, 使两个变量产生关联：

而对于person对象，确实有age属性，属性值现用现用getter读取，如果要改的话，就用setter修改，并把value属性值拿到。

定义

通过一个对象代理对另一个对象中属性的操作(读/写)，就为数据代理。

let obj = {x:100}
let obj2 = {y:200}

// 通过 obj2 读到 obj 的x
Object.defineProperty(obj2, 'x', {
  get(){
    return obj.x
  },
  set(value){
    obj.x = value
  }
})

Vue 中的数据代理

把data中的数据，放在vm上一份，通过vm对象来代理data对象中属性的操作。好处是更加方便的操作data中的数据。

原理是：通过Object.defineProperty()把data对象中所有属性添加到vm上，并为每一个添加到vm上的属性，都指定一个getter和setter，在其内部去操作data中对应的属性。

vm._data = options.data = data

vue 事件处理

<button v-on:click="showInfo">点击提示</button>
<button @click="showInfo">点击提示</button>

methods:{
  showInfo(){
    alert('hello')
  }
}

事件修饰符

// 方法二，阻止默认行为在click后加.prevent
<a href="http://baidu.com" @click.prevent="showInfo">点击提示</a>

methods:{
  showInfo(e){
    e.preventDefault()  // 方法一，阻止默认行为
    alert('hello')
  }
}

常用	内容
`@click.prevent`	阻止默认事件
`@click.stop`	阻止事件冒泡
`@click.once`	事件只触发一次

vue 梳理-面试速览