Vue_note

对MVVM的理解

MVVM是Model、View、ViewModel三者的缩写；

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据展示；
• ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
  ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

vue实现双向绑定的原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

Vue与Angular以及React的三者之间的区别

与AngularJS的区别：
相同点：都支持指令（内置指令和自定义指令）；都支持过滤器（内置过滤器和自定义过滤器）；都支持双向绑定；都不支持地段浏览器。
不同点：AngularJS的学习成本高；而Vue.js本身提供的API都比较简单、只管；在性能上，AngularJS以来对数据做账检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
与React的区别：
相同点：React采用特殊的JSX语法，Vue.js在组建开发中也推崇写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

vue等单页面应用及其优缺点

单页面应用（SPA）
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面应用（MPA）
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo。
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
初次加载时耗时多。
页面复杂度提高很多。

怎么定义vue-router的动态路由？获取传值？

定义：在router目录下的index.js文件中，对path属性增加/:id
获取：使用router对象的params.id

vue如何获取并操作dom对象

在标签上添加ref=‘myBox’，然后在代码中this.$refs.myBox

<template>
    <div ref="myBox">
        <h1>首页标题</h1>
    </div>
</template>
<script>
    export default {
        name: "Home",
        mounted(){
            this.$refs.myBox.style.color = 'red'
        }
    }
</script>
<style scoped>
    div{
        background: pink;
    }
</style>

vue-loader是什么？使用它的途径有哪些？

vue-loader作用：
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
用途:
js可以写es6,style样式可以写scss或less、template可以加jade等

vue组件间传递方法

props:子组件的模板内并不能直接使用父组件的数据，所以子组件需要用props选项来获取父组件的数据

1- 动态语法：用v-bind将动态props绑定到父组件的数据，父组件的数据发生改变，子组件也会随之改变

<div id="app">
    <didi-component  :msg="value"></didi-component>//传入获取的数据，引号里面为获取到的数据
</div>
<script>
    window.onload=function(){
        Vue.component('didi-component',{
            template:"<div>这是组件:{{msg}}</div>",
            props:['msg']            //声明自己要从父组件获取的数据
        });//全局注册组件
        new Vue({
          el:'#app',
          data: {
            value:'父组件向子组件的传递数据'
          }
})

2-绑定修饰符：props默认为单向绑定，是为了防止子组件无意间修改父组件的状态。
.sync:双向绑定
.once:单次绑定

<div id="app">
    <input type="text" v-model="info.name"/>
    <child :msg.once="info"></child>        //单次绑定
</div>
<script>
    window.onload=function(){
        new Vue({
          el:'#app',
          data:function(){
              return {
                  info:{
                      name:"顺风车"            //父组件
                  }
              }
          },
          components:{
               child:{
                   props:['msg'],
                   template:"<div>{{msg.name}}欢迎！</div>"    //子组件
               }
          }
 
})
}

vue如何定义过滤器？

new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
　　})

v-if和v-show的区别

v-if
它是惰性的，只有值为真的时候才会被选渲染。
如果从值 从 true 改变 为 false 则元素就会被销毁。
如果又从 false 改变 true 则元素会被重建。

v-show
它不管初始条件是什么，元素总是会被渲染。
它的值的变化，只是对 css display 属性的切换。

那么如何选择使用 v-if和v-show呢？
频繁切换的元素使用v-show。
条件很少改变，则使用 v-if 较好。

vue中常用的指令：

插入文本:v-text
相当于元素的innerText属性，必须是双标签

插入HMTL:v-html
相当于元素的innerHTML属性

循环:v-for
v-for的使用，除了item属性，还有一些其他辅助属性。假设你现在循环的对象名字为students:

如果students是数组，还有index属性，如v-for=“（item,index） in students”;
如果students是对象，还有value,key属性，如v-for=“（value,key,index） in students”;

条件渲染
第一种：if … else if …else型
是否插入元素

第二种：v-show
是否隐藏元素

属性绑定:v-bind
v-bind:属性名=“常量 || 变量名”，简写形式——:属性名=“常量 || 变量名”

双向绑定:v-model
所谓的双向绑定，就是你在视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

vue常用事件修饰符：

.stop 防止事件冒泡
冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外 子节点-》父节点的点击事件

.prevent取消默认事件
.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。比如我们页面的<a href="#">标签，当用户点击时，通常在浏览器的网址列出#：

.capture 捕获事件
捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件

v-on可以绑定多个方法吗

<input
     type="text"
     v-on="{
     input:onInput,
     focus:onFocus,
     blur:onBlur,
     }"
   >

Vue的生命周期函数都有哪些？什么时候调用?

（1）beforeCreat
第一个生命周期函数，表示实例在完全创建出来之前会执行它，在执行它时，data和methods中的数据都还未初始化。

（2）created
第二个生命周期函数，此时data和methods已经初始化完成，created()完成之后，vue开始编译模板，最终在内存中生成一个编译好的最终模板字符串，然后把模板字符串渲染为内存中的dom

（3）beforeMount
第三个生命周期函数，表示模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串

（4）Mounted
第四个生命周期函数，此时内存中的模板已经真实的挂载到了页面中，用户可以看到渲染好的页面了

运行中的两个事件

（5）beforeUpdated()
执行它时，data中的数据已经被更新了，但是页面中的data还未被替换过来

（6）updated()
执行它时，页面和data中的数据已经同步了

对keep-alive 的了解

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

keep-alive生命周期钩子函数：activated、deactivated

使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

被包含在 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated：在组件被停用时调用。

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

什么时候获取数据？

当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

route和router的区别？

route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。 而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

vue.js的核心特征是什么？

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。
5.vue等单页面应用及其优缺点？
优点：
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。

数据驱动
组件化
轻量
简洁
高效
模块友好
页面切换快
缺点：
不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
首屏加载耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

$nextTick的使用

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。