vue：基础0

Vue 是什么框架？

    渐近式框架

Vue核心是什么？

    声明式渲染（数据驱动）、组件系统

Vue的双向数据绑定原理（响应式原理）：Object.defineProperty( )

    Object.defineProperty。用些来劫持每个属性的 getter 和 setter。

    比如：给他一个元生对象，vue 会遍历这个对象的属性，然后进行属性转换。每个属性都会被转化成 getter 和 setter 。同时每个组件会有对应的 watcher ，用来记录当属性渲染时，用到哪些属性。

就像HelloWorld展示的那样，app.html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。

Vue 的生命周期有哪些？

    创建前后、加载前后、更新前后、销毁前后。

    beforeCreate／Created、beforeMount／Mounted、beforeUpdate／Updated、beforeDestory／Destoryed。

vue的生命周期的作用是什么？

    生命周期中有很多事件的钩子函数，让我们在vue控制中更好的实现逻辑。

vue的生命周期的钩子函数？

    Vue实例从创建到销毁的过程，从开始创建、初始化数据、载入模版、挂载DOM渲染 、更新——渲染、销毁的过程。

    注）不要在选项属性或者回调函数上使用小箭头函数。因为箭头函数是和父级上下文绑定在一起的。this 指向不是预期的。

    钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有 hook,有就回调。每个组件都有属性，事件和方法，所有的生命周期都归于事件。在某个时刻执行。

vue的第一次加载会触发哪些钩子？    

    正常情况下按顺序加载：beforeCreact、created。

    判断有没有 el ，如果有 el ，加载前两个：beforeCreact、created。

    如果没有 el，加载前四个： beforeCreact、created、beforeMount、mounted 这四个钩子。

    注意）beforeCreate、created、beforeMount、mounted 四个方法是一次性的，只执行一次。

DOM渲染在哪个周期中就完成了？

    Mounted 中就完成了。

添加挂载元素？如何创建一个 Vue 实例（初始化vue）？

    添加挂一载元素：<div id="app"></div>

    实例：通过 el 属性：指定 Vue 程序的接管范围。

               通过 data:  向 Vue 实例的应用程序初始化数据。

           

Vue初始化options说明

字段	是否必填	类型	说明
el	√	字符串/dom	使用字符串的时候一般为css选择器规则（#app、.app）
templete		字符串	如果使用了此配置，则会覆盖挂载对象的html内容，可以采用css选择器选择模板，也可以直接使用html字符串，一般情况下使用选择器模板，使用<script id="x" type="x-template"></script>标签包裹html内容，通过css选择器模式进行关联，其中script标签下有且只能有一个根节点。
data		对象	用于双向绑定的数据对象，如果绑定的是现有对象，vue不会进行深度复制使用，而是直接代理使用(引用类型)，当需要获取此对象时，可以利用vue的实例化对象的$data属性获取，如果模板内容中使用了data中没有的属性时会报错
methods		对象	用于定义函数，可以使用v-on:事件的形式进行绑定事件(v-on:click='f1')，也可以使用@事件形式进行绑定(@click='f1')
computed		对象	计算属性，当表达式过于复杂的时候可以通过计算属性来实现，这样可以避免模板中过重的业务计算，之所以进行双向绑定，是为了减少早期jq的取值赋值此类繁琐的基础业务 computed : {            fullName : function() {                      // this 指向vm实例                      return this.firstName + ' ' + this.lastName            } } <p>{{ firstName }}</p> // Gavin <p>{{ lastName }}</p> // CLY <p>{{ fullName }}</p> // Gavin CLY computed : {            price : {                      set : function(newValue) {                                 this.cents = newValue * 100;                      },                      get : function() {                                 return (this.cents / 100).toFixed(2);                      }            } } <p>&yen;{{price}}</p> // ¥1.00

$route 和 $router 有什么区别？

    $route  是”路由信息对象”，包括 path、params、hash、query、fullPath、matched、name等路由信息参数

    $router 是”路由实例”

vue 的计算属性是什么？

    A、常用的有 getter 方法来获取数据，也可以用set方法来改变数据

    B、template 中调用的时候，直接写计算属性名

    C、计算属性内部 this 指向 vm

    D、相较于 methods，不管依赖数据不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中取到，不重新计算。

v-show 和 v-if 有什么区别？

    v-show 就相当于 display 的显示和隐藏。不管条件是什么都会渲染，因为只是css切换。

    v-if 是真正的条件渲染。当条件为假时什么也不做，直到为真的时候才进行渲染。

    注）v-if 和 v -for 不能同时使用。

    简单理解： V-if 按照条件是否渲染、v-show 就相当于 block 或者 none。

vue 中常用的指令有哪些？

    有 v-for、v-model、v-if、v-else、v-else-if、v-show、v-html、v-text、v-bind、v-slot、v-pre、v-on、v-once、v-cloak

    v-model 主要针对表单。比如：Input、Textarea、Select、Radio 等 。并且会忽略掉 表单的 value、checked、selected 的初始值，总是将 vue 的实例题做为数据来源。

    注）  v-on 是可以绑定多个方法的。

vue中常用的修饰符有哪些？

    .prevent    提交事件不在重新加载页面 

    .stop         阻止事件冒泡

    .self          发生在元素本身，不是子元素的时候会触发

    .captur     事个侦听，事件发生的时候会使用 

    .trim         v-model 中自己过滤输入的首尾空白字符 

    .number   v-model 限制输入的是数值型，v-model.number = ‘'

    .lazy         v-model 在 Input 事件触发后同步数据，添加修饰符，在 change 事件中就同步了 v-model.laxy = ''

现在对一个数据进行操作，数据更新，视图没更新，怎么处理？

    使用 Vue.set()。如果在 methods 中的话写成 this.$set() 。    

    官方 API 调用方法：Vue.set( target, key, value)

    Target : 要更新的数据源（可以是对象或者数组）

    Key: 要更改的具体数据

    Value: 重新赋值

Vue 父组件向子组件传对象，不实时更新怎么办？（两种方法，有其他方法请自行添加，纯个人理解）

    1､用 v-if 重新渲染机制

    2､用 watch 监听（用的比较多）

想让组件不更新，比如说从一个组件到另一个组件中，路由切换内容不刷新。

    用 <keep-alive>。这是 vue 的内置组件，能在组件切换的过程中把状态存到内存中。防止重复渲染 DOM。

    使用 vue 切换过程钩子 activated( keep-active组件激活时调用），而不是 挂载 mounted。

Vue 组件之间的通信？

    A、父组件向子组件通信的方法？

        1､父组件中 import 导入 子组件。

        2､components 属性中注册组件名。

        3､template 中用标签形式嵌进去。 

        Props 通信，子组件用 props 接收父组件传递过来的东西，props 是单向绑定，只能父传子，不能反向传递。

        父传子有两种方式：props 和 $refs。

        Props 和 $refs 的区别是什么？

            Props 主要是用数据传递。不能调用子组件的属性和方法。

            $refs 着重于索引，主要用来调用子组的属性和方法。

      B、子组件向父组件通信的方法？

            通过 $emit。

            API 提供方法：Vm.$emit( event, arg)。arg 传递给父组件。            

            

    C、兄弟之间如何通信？        

        使用 vuex 。

        如何不使用 vuex 的话。在 Vue 实便前添另一个 bus 属性。这个属生是 vue 的实例。

Vue 的 computed 和 methods 有什么区别。

    Computed 在初始化执行后，会自动更新。大大的提高了效率。

    Methods 只有调用的时候才会执行，不会自动同步数据。

Promise 的用法有哪些？

    Promise 用同步的方式写异步的代码。

    Promise.then ( )    如果不出错，会按个传递 then 里面的内容。

    Promise.catch( )    如果 then 出错，进入 .catch 方法。要是有自己的 err 就会进入 error 方法。

    Promise.all ( )   可以并行执行多个异步操作，并且在一个回调中处理所有返回的数据。返因的数据与传参的数据一样。

    有两种状态：(resolve, reject)/(成功，失败）

场景：后台传图片是用url 还是 key 值。有 10张图片，后台给 10 个 key 值，用这个key 值请求另外一个接口午用另外一个url。传的 key 是按顺序，前台是用axios请求，axios 是异步请求的。图片顺序不对。

    问题一：如何用 promise 同步？

        用 promise.all（）

    问题二：如何用axios 同步？

        Async 和 await，在日常中不建议在methods 或者 mounted 中直接引用asycn await,尽量用callback

        

css 只在当前组件有效。

    在 style 中加 scoped

虚拟 DOM

    在 vue 2.0 中引入了一个概念，就是虚拟 DOM ，如果调用原生 js 的 DOM 操作，性能损耗。

模版和 JSX 

    在 vue  2.0 版本中，可以跳过模版直接手动渲染函数。也就是JSX 模式。模版的话和 html 很相似，可以更好的结合 css 去写。

    JSX 可以直接渲染，是真正的 javascript ，拥有这个语言本身的功能，可以处理复杂的逻辑功能，并且返回最终的 DOM 结构。