vue 高级技巧

1.css 局部样式

• vue 中style样式添加scoped属性表示它的样式只作用于当前组件，样式私有化。
• 但是当前组件的根组件会受到父组件样式的影响。（比如父组件有个.box{background:red}, 如果子组件即当前组件的根组件类名也为box，那背景也会为red）
• 其中渲染的原理：

给HTML的DOM节点添加一个不重复的data属性 来表示唯一性

在对应的css选择器末尾添加一个当前组件的data属性选择器来私有化

• 如果使用了scoped属性后，想让组件内部样式被外部控制，只需要css添加 deep属性即可

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>

2. Vue.filter 全局过滤器

• 过滤器的目的主要是为了对数据进行转换

• computed计算属性也可以转换，但是computed不能接受参数，只能针对某一个Vue内部属性进行转换，但是filter可以接受参数。

注册
全局过滤器

Vue.filter('globalFilter', value=>{....})

组件过滤器

filters:{
  testFilters: value=>{...}
}

使用

在双花括号插值

{{message | testFilter}}

在v-bind表达式中使用

<div v-bind:=id="rawId | testFilter"></div>

3. Vue.nextTick

• 用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
• 那么这句话是什么意思呢，其实简单来说就是，当我们修改数据后，视图层的数据更新是异步的，既：当修改过数据后立即输出绑定改数据的dom元素，该dom元素中的数据还是未更新过的。

<template>
  <div id="app">
    <span ref="name">{{ name }}</span>
    <button type="button" @click="change">改变</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      list: [1,2,3],
      name: 'tom'
    }
  },
  methods: {
    change() {
      this.name = 'lucy';
      console.log(this.$refs.name.innerHTML, 'dom未更新'); // 输出tom
      this.$nextTick(function (){
        console.log(this.$refs.name.innerHTML, 'dom已更新'); // 输出tom
      });
    }
  }
}
</script>

4. mixins

• 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

• 有以下几个特点

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

ar mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

• 当然也可以 全局混入
• 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

5. watch

• 类型：{ [key: string]: string | Function | Object | Array }
• 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    //  如果只是监听e.f改变，可以只监听e.f，比监听e deep： true要好
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

6. Vue.$set

• 问题
  如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 或者 索引数组的修改，vue无法劫持该数据进行响应式变化

• 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineproperty把这些属性全部转为 getter/setter

• 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的

• 解决方案

• Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

Vue.set(vm.obj, 'e', 0)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,'e',02)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

7. Vue的通信方式
https://blog.csdn.net/u013262823/article/details/86570909

父子组件通信： v-bind:attr ，props
provide, inject (祖孙通信)
$attr、 $listeners
$parent, $children
ref
$emit, $on
Vuex

provide inject
父组件

<template>
  <div class="test">
    <son prop="data"></son>
  </div>
</template>
 
<script>
export default {
  name: "Test",
  provide: {
    name: "Garrett"
  }
};
</script>

孙组件

<template>
    <div>
        {{name}}
    </div>
</template>
 
<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>