vue2+复习笔记

【原创】

ESM

vue不同规范文件作用
ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：

• 为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。

• 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过 <script type="module"> 直接导入。

通过 $parent 直接访问父组件，

可以改变父组件的数据，并达到响应式的效果（从这一点来说，vue不能说是单向数据流）

组件之间传参

父到子	子到父	是否响应式	特点
prop	slot prop	是	引用传递
provide	inject	否	引用传递
$refs /$children	$parent(根实例$root)	否	引用传递
vuex 等	vuex 等	是	中间层
$eventBus	$eventBus	否	中间层
全局对象	全局对象	否	中间层

引用传递： 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

组件之间的循环引用

组件之间的循环引用

vuex中应用日志

import { createLogger } from 'vuex'

//   通过plugins 取应用日志
vue.store({
  state:{},
  getter:{},
  mutation:{},
  action:{},
 plugins:[ createLogger ]
})

vuex 双向数据绑定的优化

// 不正确方式
<input v-model="$store.state.message">
// 方式一
<input :value="$store.state.message" @input="
  (e)=>{
      $store.commit('changeMsg',e.target.value)
  }  ">

必须承认，这样做比简单地使用“v-model + 局部状态”要啰嗦得多，并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性：

<input v-model="message">
// 方式二
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

vue响应式数据依赖收集

image.png

模版AST与Vnode

image.png