# 初探Vue3

<div>Hello World</div>

const hoisted = createVNode('div', null, 'Hello World')
function render() {
  // .......
}

// 如果在模板中有很多静态节点连在一起，vue 会将连续的静态节点编译成一长串字符串，做到大量的静态节点预字符串化

<div>{{ data }}</div>

// 给 div 打上 TEXT 标签，表示该节点中内容是动态的
function render() {
  _createBlock('div', .......) /* TEXT */
}

<div :class="class">{{ data }}</div>

// 给 div 打上 TEXT, CLASS 标签，表示该节点中内容和类名是动态的
function render() {
  _createBlock('div', .......) /* TEXT, CLASS */
}

/* 未使用 setup */
export default defineComponent({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
    },
    subtract() {
      this.count -= 1
    }
  }
})

/* 使用 setup */

// count.ts
import { ref } from 'vue'

export default function useCount() {
  const count = ref(0)
  const add = () => count.value += 1
  const subtract = () => count.value -= 1

  return {
    count,
    add,
    subtract
  }
}

// MyComponent.vue
import { defineComponent } from 'vue'
import useCount from 'count'

export default defineComponent({
  setup() {
    const { count, add, subtract } = useCount()

    return {
      count // return 的属性和方法可以直接在模板中调用
    }
  }
})

setup(props, context) {}

// 也可以用解构的方式写
setup(props, { attrs, slots, emit }) {

  // attrs 和 slots 不应该使用解构的方式调用，因为他们会随着组件的更新而更新，如果需要应该这两个属性的更新，请在 onUpdated 生命周期中调用

  // 需要注意的是，不能使用正常的方式解构 props，会让解构出来的数据失去响应性
  const { title } = props // ×

  // 需要使用 vue 提供的 toRefs 解构 props，是数据保持响应性
  const { title } = toRefs(props) // √

}

// setup 中的生命周期就是在 option api 的生命周期前加上 on
setup() {

  // 值得注意的是，setup 里没有 beforeCreate 和 created 这两个生命周期，因为 setup 本身就是在这两个生命周期之间执行的，所以不需要显式的定义他们

  onBeforeMount(() => {})
  onMounted(() => {})
  onBeforeUpdate(() => {})
  onUpdated(() => {})
  onBeforeUnmount(() => {})
  onUnmounted(() => {})
  onErrorCaptured(() => {})
  onRenderTracked(() => {})
  onRenderTriggered(() => {})

}

// 首先是 watch，其行为和 vue2 中的 watch 没有太大的区别，只是在 setup 中写法更改了而已
// 监听单一数据源
const count = ref(0)
watch(count, (newVal, oldVal) => {})

const state = Reactive({ count: 0 })
watch(() => state.count, (newVal, oldVal) => {})

// 监听多数据源
watch([count0, count1], ([newVal0, newVal1], [oldVal0, oldVal1]) => {})

// 看完了 watch ，再来看看 watchEffect ，首先说说他们两者的区别
// 1. 无需显式指定监听的数据源，且无法监听数据源前后的值，只能监听数据源的更改做出相应的操作
// 2. 在组件初始化的时候就会执行一遍，而 watch 是惰性的，只有在数据源变更的时候才会执行
// 3. 返回一个回调，可以手动停止监听
// 4. 传入 watchEffect 的函数可以接受一个 onInvalidate 作为入参，可以在适当的时机清楚执行副作用
// 5. 接受选项配置，自定义在组件更新前后执行
const stopWatch = watchEffect(
  onInvalidate => {
    if (count.value > 5) {
      onInvalidate(() => console.log(count.value))
    }
  },
  {
    flush: 'post', // 默认是 pre，即在组件更新前执行，post 是组件更新后，sync 将执行时机变为同步执行
    // 这两项仅在开发时有效，都接受一个有关数据源的变更信息作为参数
    onTrack(e) {}, // 在数据源变更时调用
    onTrigger(e) {} // 在数据源变更导致执行回调的时候调用
  }
)

stopWatch()

// vue2 中我们需要在 Vue 对象上挂在好我们需要的插件和各类配置，在最后才进行实例化
// 而 Vue3 中不再使用 new Vue() 的方式注册根实例，而是采用函数式编程的方式：createApp
// 几乎所有 Vue3 的 api 都采用了 ES6 的 Module 方式引入，这样可以有更好的 Tree-shaking，减少了构建体积

// vue2
import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)
Vue.filter(/* */)
Vue.directive(/* */)
Vue.mixin(/* */)
Vue.config.** = /**/

/* 这时候如果实例化多个 Vue 实例，将会受到相同配置的影响 */
const app1 = new Vue({
  el: '#app1'
})
const app2 = new Vue({
  el: '#app2'
})

// Vue3
import { createApp } from 'vue'

const app = createApp({})
app.use(/**/)

// 以往我们在 vue2 中经常把一些常用的方法和属性挂在到 Vue 实例上，以便于在组件内快速的调用
// 现在 Vue3 针对这一方式做出了优化

// Vue3
const app = createApp()
/* 所有自定义属性和方法统一挂载在 config.globalProperties 上 */
app.config.globalProperties.$http = {}

// Vue3 的指令中，生命周期同步为和组件的生命周期一致

const app = creatApp()

/* 所有生命周期参数均接收 el, binding, vnode, prevVnode */
app.directive('focus', {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
})

// 在以往 vue2 中，如果我们需要向自定义组件中传入多个同步的参数，往往会使用 .sync 绑定组件上的属性
// 而在 Vue3 中，我们可以使用具名的 v-model 绑定多个属性值

<my-component v-model:title="hello world" v-model:content="hello world" />

// MyComponent.vue
export default defineComponent({
  props: {
    title: String,
    content: String.
  }.
  methods: {
    changeTitle(value) {
      this.$emit('update:title', value)
    },
    changeContent(value) {
      this.$emit('update:content', value)
    }
  }
})

// 先让我们看代码示例

// 以下是 vue2 中常用的两种在 v-for 中绑定节点的方式，这两种方式都使我们在代码里不那么容易的定位到我们需要的节点上
<div v-for="n in 10" :key="n" ref="divs"></div>
<div v-for="n in 10" :key="n" ：ref="`divs-${n}`"></div>

// 而在 Vue3 中我们可以使用一个函数直接绑定到节点的 ref 属性上
<div v-for="n in 10" :key="n" :ref="setRefs"></div>

export default defineComponent({
  data() {
    return {
      els: []
    }
  },
  methods: {
    setRefs(el) {
      this.els.push(el)
    }
  }
})

// 直接对比新旧版本的生命周期

// vue2
export default {
  beforeCreate() {},
  created() {},
  beforeMounte() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy(){},
  destroy() {}
}

// Vue3
export default defineComponent({
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUmount(){},
  unmounted() {}
})

// 在 vue2 中定义一个异步组件，我们通常使用 import 函数或者是用 option api定义
const myAsyncComponent = () => import('./MyAsyncComponent.vue')
const myAsyncComponent = {
  component: () => import('./MyAsyncComponent.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

// 在 Vue3 中的异步组件都需要通过 defineAsyncComponent 来定义
import { defineAsyncComponent } from 'vue'

const myAsyncComponent = defineAsyncComponent(() => import('./myAsyncComponent.vue'))
const myAsyncComponent = defineAsyncComponent({
  loader: () => import('./myAsyncComponent.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

// vue2 版本我们通常用 .sync 实现子组件和父组件的属性同步更新
<my-component :text.sync="myText" />

// Vue3 版本中移除了 .sync ,用命名的v-model代替
<my-component v-model:text="myText" />

// vue2 数字按键修饰符
<my-component @keyup.13=”enter“ />

// Vue3 具名按键修饰符
<my-component @keyup.enter=”enter“ />
<my-component @keyup.scroll-lock=”enter“ />

// 这三个 api 的移除对项目中影响最大的无疑是组件通讯 event bus，vue2 项目中，我们可以使用 event bus 实现组件间的通信，但是这在 Vue3 中已经不再被支持了

const Bus = new Vue()
Bus.$on('change', 'change info')
Bus.$once('change', 'change info')
Bus.$off('change')

// 由于在 Vue3 中使用了 Proxy ，能够很好的监听对象的变化，如：属性的新增，所以 $set 在 Vue3 中就变得没有意义了

this.$set(data, {})

// vue2 中我们一般使用 filter 过滤或者格式化文档中的数据，但实际上 filter 就是普通的函数，所以在 Vue3 中直接取消了对 filter 的支持，官方建议我们使用普通的函数对数据进行处理

// vue2
<div>{{ date | formatter }}</div>

filters: {
  formatter(value) {
    return moment(value).formatter('YYYY-MM-DD HH:mm:ss')
  }
}

// Vue3
<div>{{ formatter(date) }}</div>

methods: {
  formatter(value) {
    return moment(value).formatter('YYYY-MM-DD HH:mm:ss')
  }
}

// Vue3 中将 $beforeDestroy 和 $destroy 这两个生命周期替换为 $beforeUnmount 和 $unmounted

// vue2
new Vue({
  beforeDestroy(){},
  destroy() {}
})

// Vue3
defineComponent({
  beforeUnmount(){},
  unmounted() {}
})

// vue2 中我们可以讲 vue 实例声明为 functional ，显式的使用 render 函数渲染节点
// 而在 Vue3 中取消了这一做法，需要显式的导入 h 函数渲染节点

// vue2
new Vue({
  render(h, { props, data, children }) {
    return h('h1', {}, 'hello world!')
  }
})

// Vue3
import { h } from 'vue'

const myComponent = (props, { attrs, slots }) => {
  return h('h1', {}, 'hello world!')
}