vue中有哪些修饰符和事件修饰符
1、常见修饰符有.sync，.lazy，.passive

(1).sync

因为vue是单向数据流，从父组件传到子组件的数据，子组件如果修改数据会报错，加上.sync后子组件内部改变props属性值并更新到父组件中

(2).lazy

v-model双向数据绑定，输入框输入内容时视图就更新了，如果想要输入完所有数据再更新视图，可以通过添加.lazy实现光标离开后再更新视图
<input type="text" v-model.lazy="value">

(3).passive

在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.passive修饰符
<div v-on:scroll.passive="onScroll">...</div>

(4).native

这个修饰符只能是操作在组件上，把一个vue组件转化为一个普通的HTML标签，如果是操作在普通HTML标签上会失效

2、常见的事件修饰符.stop, .prevent, .self, .capture, .passive, .once

(1).stop

防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。

(2).prevent

某些标签拥有自身的默认事件，比如标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。

(3).capture

捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行

(4).self

将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

(5).once

这个比较好理解，加上once修饰符以后事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。

(6).passive

使用.passive就可以提前告诉浏览器，我们没有用preventDefault阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。

前言
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。
本文的代码请猛戳https://github.com/ljianshu/Blog，纸上得来终觉浅，大家动手多敲敲代码！
一、属性
1.自定义属性props
prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。
// 父组件 // 子组件 props: { name: String, type: {　 //从父级传入的 type，它的值必须是指定的 'success', 'warning', 'danger'中的一个，如果传入这三个以外的值，都会抛出一条警告 validator: (value) => { return ['success', 'warning', 'danger'].includes(value) } }, onChange: { //对于接收的数据，可以是各种数据类型，同样也可以传递一个函数 type: Function, default: () => { } }, isVisible: { type: Boolean, default: false }, list: { type: Array, // 对象或数组默认值必须从一个工厂函数获取 default: () => [] } }
从上面的例中，可以得出props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。
2.inheritAttrs
这是2.4.0 新增的一个API，默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。注意：这个选项不影响 class 和 style 绑定。
上个例中，title属性没有在子组件中props中声明，就会默认挂在子组件的根元素上，如下图所示：
3. data与props区别
相同点
两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。
不同点
data 被称之为动态数据，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。
props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中直接操作 传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。至于如何改变，我们接下去详细介绍：
4.单向数据流
这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢？
方法1：过渡到 data 选项中
在子组件的 data 中拷贝一份 prop，data 是可以修改的
export default { props: { type: String }, data () { return { currentType: this.type } }}
在 data 选项里通过 currentType接收 props中type数据，相当于对 currentType= type进行一个赋值操作，不仅拿到了 currentType的数据，而且也可以改变 currentType数据。
方法2：利用计算属性
export default { props: { type: String }, computed: { normalizedType: function () { return this.type.toUpperCase(); } }}
以上两种方法虽可以在子组件间接修改props的值，但如果子组件想修改数据并且同步更新到父组件，却无济于事。在一些情况下，我们可能会需要对一个 prop 进行『双向绑定』，此时就推荐以下这两种方法：
方法3：使用.sync
// 父组件
 
 
父组件msg：{{ msg }}
 
父组件数组：{{ arr }}
 
 打开model框 

记得面试的时候，被问到这个，当时只是简单粗暴的回答了
现在趁着假期，整理一下和这个知识点有关的笔记
1) 通信种类

父组件向子组件通信
子组件向父组件通信
隔代组件间通信
兄弟组件间通信

2) 实现通信方式

props
vue自定义事件
消息订阅与发布
vuex
slot

3) 方式1: props

通过一般属性实现父向子通信
通过函数属性实现子向父通信
缺点: 隔代组件和兄弟组件间通信比较麻烦

4) 方式2: vue自定义事件

vue内置实现, 可以代替函数类型的props

a.	绑定监听: <MyComp @eventName=“callback”

b.	触发(分发)事件: this.$emit(“eventName”, data)
缺点: 只适合于子向父通信

5) 方式3: 消息订阅与发布

需要引入消息订阅与发布的实现库, 如: pubsub-js

a.	订阅消息: PubSub.subscribe(‘msg’, (msg, data)=>{})

b.	发布消息: PubSub.publish(‘msg’, data)
优点: 此方式可用于任意关系组件间通信

6) 方式4: vuex

是什么: vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
优点: 对组件间关系没有限制, 且相比于pubsub库管理更集中, 更方便

7) 方式5: slot

是什么: 专门用来实现父向子传递带数据的标签

a.	子组件

b.	父组件
注意: 通信的标签模板是在父组件中解析好后再传递给子组件的

vue2-Object.defineProperty
vue2的响应式对象的核心是利用了ES5中 Object.defineProperty 给对象的属性添加了getter和setter。
Vue会把props、data等变成响应式对象，在创建过程中，发现子属性也为对象时则递归把该对象变成响应式。
触发getter的时候，触发依赖收集，那么依赖收集做了哪些事情？
getter-依赖收集
vue源码
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend() //依赖收集
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify() // 派发更新
    }
  })

访问数据时，触发getter，调用当前watcher 的addDep()，收集依赖存在this.subs（收集当前正在计算的watcher，然后把这些watcher作为订阅者），当数据发生改变的时候，会执行setter，派发更新。
注意点-延伸：在有v-if和v-else中视图渲染中，如果当前显示的是v-if的数据，那么不管v-else的依赖的数据怎么样变化，都不会触发重现渲染，因为在cleanupDeps函数中会比较this.newDepIds和dep中的watcher，如果没有，则remove掉，是一个性能上的提升。
总结：依赖收集就是订阅数据变化的watcher的收集，目的是当这些响应式数据发生变化，触发它们的 setter的时候，能知道应该通知哪一些订阅者去做相应的逻辑处理。
setter-派发更新
触发setter的时候，派发更新，那么派发更新做了哪些事情？
遍历之前的watcher订阅者，调用订阅者的subs[i].update()；然后会执行queueWacther()这个方法，在这里方法里面会将watcher push 到 queue里面，这个过程是同步执行的，当执行完push操作之后，接着执行flushSchedulerQueue()这个方法；首先按照从父到子的顺序排序watcher，然后遍历watcher，执行watcher.run()
官网解释
链接：https://cn.vuejs.org/v2/guide/reactivity.html

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

解决办法
// 添加一个属性
this.$set(this.obj,'b',1) // Vue.set(vm.obj,'b',1)

// 添加多个属性
this.obj = Object.assign({},this.obj,{a:1,b:2})

数组

Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength


解决办法
// 解决第一个 Vue.set, Array.prototype.splice
Vue.set(vm.items,indexOfItem,newValue) 
vm.items.splice(indexOfItem,1,newValue)

// 解决第二个 Array.prototype.splice
vm.items.splice(newLength)

与Vue.set对应的是Vue.delete，Vue.delete( target, propertyName/index
缺点

不能监听数组下标及长度变化、实例对象新增或删减属性
需要使用递归、闭包，消耗性能和内存
代码较复杂，需要做数据备份

vue3–proxy
vue3的响应式对象的核心是利用了ES6中 proxy 给对象的属性添加了getter和setter。
proxy是在访问对象之前设置一层拦截，对整个对象进行代理（可以是任何类型的对象，包括原生数组、函数，或者是另一个代理）
proxy源码
let obj = new Proxy(ob,{
   //target就是第一个参数ob 
    get: function(target,key,value){
        // let result = Reflect.get(target,key)
        // return result
        return target[key]
    },
    set: function(target,key,value){
        // let result = Reflect.set(target,key,value)
        // return result
        target[key] = value
    }
})

缺点

因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11

相比Object.defineProperty()的优点

可以监听数组变化或对象属性的增减
不需要一次性遍历data属性，减少性能消耗
代码较简单