vue知识点集合（一）

想整理一下工作中用到的vue知识，然后试着理解一下底层概念，也可以供将来自己复习查看。

Ⅰ. style加scoped属性的用途和原理

用途：在标签上绑定了自定义属性，防止css全局同名污染，表明style里的css样式只适用于当前组件元素。

原理：在标签加上v-data-属性，再在选择器时加上对应[v-data-]即完成独立CSS类名选择

注意：很多时候使用ui框架如果加scope就不能覆盖。

           用/deep/可以对组件内的样式进行覆盖。

           也可以在该组件中单独创建一个style标签写ui框架样式。

Ⅱ . 如何在子组件中访问父组件的实例？

  this.$parent 拿到父组件实例
  this.$children 拿到子组件实例（数组）

Ⅲ . 如何实现父子组件之间的传值？

① 父传子：

父组件要通过v-bind（简写：）将要传递的数据绑定到子组件上。

在子组件中用props方法接收父组件传来的值，（两种方法，具体用哪种看个人喜好，推荐第二种）

  props:["toSonData"],//第一种方式
  props:{//第二种方式
    toSonData:{
      type:String,
      default:function(){
        return ""
      }
    }

② 子传父

son.vue

在子组件中son.vue中创建一个按钮，定义一个点击事件，点击事件里用this.$emit方法触发一个自定义事件，并传递一个参数。

//son.vue

给爸爸传值

father.vue

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法，将接收到的值赋给data中的sendSonMessage

 // father.vue

Ⅳ. vue双向绑定的原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

我们先来看Object.defineProperty()这个方法:

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法

下面是关于数据劫持的过程图：

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化-> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

Ⅴ.  请描述下vue的生命周期是什么？

生命周期主要是vue加载页面时的一个过程，分为“创建前/后，载入前/后，更新前/后，销毁前/后”等等，用于我们根据不同的状态处理不同的业务。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和**数据对象**data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

Ⅵ . 第一次加载页面时会触发哪几个钩子？

beforeCreate, created, beforeMount, mounted

Ⅶ . 简单描述每个周期具体适合哪些场景

·beforecreate : 可以在这加个loading事件，在加载实例时触发

·created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

·mounted : 挂载元素，获取到DOM节点

·updated : 如果对数据统一处理，在这里写上相应函数

·beforeDestroy : 可以做一个确认停止事件的确认框

·nextTick : 更新数据后立即操作dom

Ⅷ .  vue常用的修饰符有哪些？列举并说明

v-model: .trim .number
v-on: .stop .prevent
鼠标键盘的修饰符: ..