Vue 开发必须知道的36个技巧(小结)

3.14 Vue.observable

2.6.0 新增
用法:让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象;

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新;
也可以作为最小化的跨组件状态存储器，用于简单的场景。

通讯原理实质上是利用Vue.observable实现一个简易的 vuex

// 文件路径 - /store/store.js
import Vue from 'vue'
export const store = Vue.observable({ count: 0 })
export const mutations = {
 setCount (count) {
 store.count = count
 }
}
//使用
<template>
 <div>
  <label for="bookNum">数 量</label>
   <button @click="setCount(count+1)">+</button>
   <span>{{count}}</span>
   <button @click="setCount(count-1)">-</button>
 </div>
</template>
<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable
export default {
 name: 'Add',
 computed: {
 count () {
  return store.count
 }
 },
 methods: {
 setCount: mutations.setCount
 }
}
</script>

4.render 函数

1.场景:有些代码在 template 里面写会重复很多,所以这个时候 render 函数就有作用啦

// 根据 props 生成标签
// 初级
<template>
 <div>
 <div v-if="level === 1"> <slot></slot> </div>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </div>
</template>
// 优化版,利用 render 函数减小了代码重复率
<template>
 <div>
 <child :level="level">Hello world!</child>
 </div>
</template>
<script type='text/javascript'>
 import Vue from 'vue'
 Vue.component('child', {
 render(h) {
  const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]  return h(tag, this.$slots.default)
 },
 props: {
  level: { type: Number, required: true }
 }
 })
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }
</script>

2.render 和 template 的对比

前者适合复杂逻辑,后者适合逻辑简单;
后者属于声明是渲染，前者属于自定Render函数;
前者的性能较高，后者性能较低。