🍜 酷库 - Vue

/**
 *  ref 方法用来定义 "简单" 的响应式数据，参数不限制类型
 *  ref 会将传入的数据，套一层对象，并将数据作为对象的 value 属性
 *  ref 方法会将内部的引用类型全部转为 "响应式数据"
 *  ref 内部其实也是用的 reactive
 *
 *  使用 attr.value 的方式获取值
 *  使用 attr.value = any 的方式改变值
 *
 *  shallowRef 与 ref 类似
 *  区别是不会将值内部的引用类型的值转为 "响应式数据"
 *    const data = ref({ obj: { count: 0 } })
 *    data.value.obj.count = 10
 *    // => data.value.obj 是响应式数据，obj 中的值改了，页面就会自动刷新
 *
 *    const data = shallowRef({ obj: { count: 0 } })
 *    data.value.obj.count = 10
 *    // => data.value.obj 不是响应式数据，obj 中的值虽然改了，但是页面不会自动刷新
 **/
const num = ref(0)

/**
 *  reactive 方法用来定义 "复杂" 的响应式数据
 *  参数必须是对象或者数组，通常为对象（对象中再定义数组）
 *  比较好的思想是 "抽象" 一个功能，将相关的数据都封装在一起。
 *  一旦定义之后，无法改变自身，可以改变内部的属性值。
 *
 *  reactive 不会像 ref 一样套一层 value
 *  因为 reactive 的参数只可传入引用类型
 *  直接使用 attr.key 的方式获取值
 *  使用 attr.key = any 的方式改变值
 *
 *  reactive 和 shallowReactive 的区别
 *  区别是不会将值内部的引用类型的值转为 "响应式数据"
 *    const data = reactive({ obj: { count: 0 } })
 *    data.value.obj.count = 10
 *    // => data.value.obj 是响应式数据，obj 中的值改了，页面就会自动刷新
 *
 *    const data = shallowReactive({ obj: { count: 0 } })
 *    data.value.obj.count = 10
 *    // => data.value.obj 不是响应式数据，obj 中的值虽然改了，但是页面不会自动刷新
 **/
const state = reactive({ num: 0 })

export default {
  data () {
    return {
      num: 0,
      state: { num: 0 }
    }
  }
}

/**
 *  computed 用来定义计算属性
 *  和 vue2 的没有任何的不同，都是基于 "响应式数据" 来实时计算结果。
 *  也可以传入一个对象，同时设置 get 和 set。
 *  注意的是 computed 将返回一个 ref 对象
 *  也可以将 computed 写在 ref 和 reactive 定义的中 "响应式数据" 对象中
 **/

export default {
  data () {
    return {
      name: 'jason'
    }
  },
  computed: {
    fullName () {
      return `------ ${ this.name } ------`
    }
  }
}

/**
 *  methods 应该是最容易理解的了
 *  写在 setup 中，内部的话直接调用即可
 *  return 出去，就可以在 template 中调用了
 **/

export default {
  methods: {
    submit () {
      console.log('submit')
    }
  }
}

/**
 *  watch 方法用来监听 "响应式数据" 的变化
 *  当指定的 "响应式数据" 变化时，触发回调
 *
 *  需要传入两个必要参数和一个可选参数
 *    1. 指定需要监听的 "响应式数据"，可以为数组，代表同时监听多个 "响应式数据"
 *    2. 回调函数，调用时将传入 newValue、oldValue、onInvalidate
 *    3. 配置项，{ deep: false, immediate: true }
 *
 *  复杂点在第一个参数上
 *    - 若监听某 "响应式数据" 的替换型改变（ref.value = any）时，直接传入 ref 就行。
 *    - 若 "响应式数据" 为对象，并且想监听对象内部值变化时，需要传入一个函数，返回这个对象，并且配置 deep: true
 *    - 若 "响应式数据" 为对象，并且想监听固定某内部值的变化时，则需要传入一个函数，返回指定的字段
 *    - 若想监听的值为数组，则需要传入一个函数，函数中返回数组的克隆副本
 *
 *  oldValue
 *    若监听值为对象或者数组中包含引用类型，想正确获取 oldValue 值
 *    需要在传入的函数中返回深拷贝的副本
 *    lodash _.cloneDeep 方法可以帮助做到
 *    若使用了深拷贝，则不需要 deep: true
 *
 *  onInvalidate
 *  函数执行时，将接收 onInvalidate 函数作为入参，
 *  需要自行实现
 *  在函数即将重新执行时、侦听器被停止时调用
 *  主要用来清除异步代码带来的 "副作用"
 **/

export default {
  data () {
    return {
      num: 0,
      arr: [ 1, 2, 3 ],
      state: { num: 0 }
    }
  },
  watch: {
    num (newValue, oldValue) {},
    state: {
      deep: true,
      handler (newValue, oldValue) {}
    },
    'state.num' (newValue, oldValue) {},
    
    // 无法监听 this.arr[0] = 10 的这种情况
    arr (newValue, oldValue) {},
  }
}

若为数组，动态循环渲染的情况暂时未找到方案…

<template>
  <comp-button ref="btn"/>
</template>

export default {
  mounted () {
    console.log(this.$refs.btn)
  }
}

太简单了，就是 sync 修饰符换成了统一的 v-model 指令写法，
并且好像之前的 sync 串用不了向 trim 这种修饰符，而 v-model 可以，
算是增强功能了。

<template>
  <div>
    <!--
      在 comp-dialog 组件内部
      使用 this.$emit('update:title', newValue) 的方式传递事件
      其中，默认的 v-model prop 名字为 value
    -->
    <comp-dialog
      v-model="show"
      :title.sync="text"
      :content.sync="content"/>
  </div>
</template>

export default {
  data () {
    return {
      show: false,
      text: '我是标题',
      content: '我是内容'
    }
  }
}

v-slot 指令在 Vue 2.6 就已经有了
但是在 Vue 2.6 之后还可以继续使用 slot 和 slot-scope（）
但是在 Vue3 中 slot 和 slot-scope 已经被移除了

<!-- comp-dialog -->
<template>
  <div>
    <slot name="header" text="header"/>
    <slot name="default" text="default"/>
    <slot name="footer" text="footer"/>
  </div>
</template>

<template>
  <comp-dialog>
    <template slot="header" slot-scope="{ name }"></template>
    <template slot="default" slot-scope="scope"></template>
    <template slot="footer" slot-scope="{ name }"></template>
  </comp-dialog>
</template>