Vue从入门到精通7天 - Vue 3 与 Vue 2 的亿点点差异记录 - 《李俊扬的技术分享》

vue 3.x

https://v3.cn.vuejs.org/api/global-api.html#createapp

// vue 3.0
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app') // mount这个方法，和ReactDOM.render方法的作用感觉差不多
// app.unmount()  可以使用它，卸载组件了
// vue 2.0
new Vue({
  el: "#app",
  data: {},
})
/* 真实DOM
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
*/
或者
vue 2.0
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

app.use(MyPlugin)
2.x与3.x完全不同
3.x 往app.config.globalProperties里面加东西
export default {
  install: function (app, opts = {size : undefined, zIndex : undefined}) {
      components.forEach(component => {
        app.component(component.name, component);
      });
      app.config.globalProperties.$ELEMENT = {
        size: opts.size || '',
        zIndex: opts.zIndex || 2000
      };
  }
}
2.x 是往Vue.prototype里面加东西
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

vue2.x生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated 配合keep-alive使用的
deactivated
beforeDestory
destoryed
errorCaptured
vue3.x中去掉了beforeDestory,destoryed
用beforeUnmount，unmounted代替了
还加入了两个生命周期
renderTracked (e: DebuggerEvent) => void
跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
renderTriggered (e: DebuggerEvent) => void
当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
// 之后(Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}

npm install vue-router@next
npm install vuex@next --save

// vue3，vue2 都有
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

vue 3.x

defineComponent

从实现上看，defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持

defineAsyncComponent

创建一个只有在需要时才会加载的异步组件

resolveComponent(name) name 是组件名称

只能在render或setup中使用

const app = createApp({})
app.component('MyComponent', {
  /* ... */
})
import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}

resolveDynamicComponent(String | Object (组件的选项对象))

允许使用与相同的机制来解析一个 component。

resolveDirective

如果在当前应用实例中可用，则允许通过其名称解析一个 directive。

const app = createApp({})
app.directive('highlight', {})
import { resolveDirective } from 'vue'
render () {
    // 返回一个 Directive。如果没有找到，则返回 undefined。
  const highlightDirective = resolveDirective('highlight') 
}

withDirectives

允许将指令应用于 VNode。返回一个包含应用指令的 VNode。

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')
return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])

createRenderer 自定义渲染器

https://v3.cn.vuejs.org/api/global-api.html#createrenderer

nextTick

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

import { createApp, nextTick } from 'vue'
const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }
})

mergeProps 合并属性值

import { h, mergeProps } from 'vue'
export default {
  inheritAttrs: false,
  render() {
    const props = mergeProps({
      // 该 class 将与 $attrs 中的其他 class 合并。
      class: 'active'
    }, this.$attrs)
    return h('div', props)
  }
}

useCssModule

允许在 setup 的单文件组件函数中访问 CSS 模块。

<script>
import { h, useCssModule } from 'vue'
export default {
  setup () {
    const style = useCssModule()
    return () => h('div', {
      class: style.success
    }, 'Task complete!')
  }
}
</script>
<style module>
.success {
  color: #090;
}
</style>