new Vue ---> createApp 🚩 ➕#

vue2中没有app 的概念，通过Vue的统一构造函数进行全局的配置，单页应用中无法创建多个不同全局配置的根应用（会造成全局配置污染）

vue3中有了app概念，通过createApp创建返回的实例暴露全局api，解决了vue2中的问题

• Vue2

  1
  import Vue from "vue";
  2
  import App from './App.vue'
  3
  
  4
  new Vue({
  5
    render: (h) => h(App)
  6
  }).$mount("#app");
  

• Vue3

  createApp 生成一个app实例，该实例拥有全局的可配置上下文

  1
  import { createApp } from 'vue'
  2
  import App from './App.vue'
  3
  
  4
  const app = createApp(App).mount('#app');
  

所以现在所有全局会改变Vue行为的api都改到了app应用实例上了

internal Apis 🚩#

文档

vue2中不少global-api是作为静态函数直接挂在构造函数上的，例如Vue.nextTick()，如果我们从未在代码中用过它们，就会形成所谓的dead code，这类global-api造成的dead code无法使用webpack的tree-shaking排除掉。

vue3中做了相应的变化，将它们抽取成为独立函数，这样打包工具的摇树优化可以将这些dead code排除掉。

Vue2

1
import Vue from 'vue';
2
Vue.nextTick(()=>{})

Vue3

1
import { nextTick } from 'vue'
2
nextTick(() => {})

官方文档列出受影响的api

[Image missing: image-20220416125617961]

app.config#

1
import Vue from 'vue'
2
Vue.prototype.$http = axios

1
// Vue3
2
const app = Vue.createApp({})
3
app.config.globalProperties.$http = axios

1
- Vue.config.devtools = true
2
+ app.config.devtools = true

1
- Vue.config.errorHandler = function (err, vm, info) {
2
  // handle error
3
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
4
  // 只在 2.2.0+ 可用
5
}
6
+ app.config.errorHandler = (err, vm, info) => {
7
  // handle error
8
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
9
  // 这里能发现错误
10
}

1
- Vue.config.warnHandler = function (msg, vm, trace) {
2
  // `trace` 是组件的继承关系追踪
3
}
4
+ app.config.warnHandler = function(msg, vm, trace) {
5
  // `trace` 是组件的继承关系追踪
6
}

1
- Vue.config.ignoredElements = [
2
  // 用一个 `RegExp` 忽略所有“ion-”开头的元素
3
  // 仅在 2.5+ 支持
4
  /^ion-/
5
]
6

7
// 一些组件以'ion-'开头将会被解析为自定义组件
8
+ app.config.isCustomElement = tag => tag.startsWith('ion-')

1
const app = Vue.createApp({
2
  mounted() {
3
    console.log(this.$options.hello)
4
  }
5
})
6

7
app.config.optionMergeStrategies.hello = (parent, child, vm) => {
8
  return `Hello, ${child}`
9
}
10

11
app.mixin({
12
  hello: 'Vue'
13
})
14

15
// 'Hello, Vue

1
const app = Vue.createApp({
2
  custom: 'hello!'
3
})
4

5
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
6
  console.log(fromVal, toVal)
7
  // => "goodbye!", undefined
8
  // => "hello!", "goodbye!"
9
  return fromVal || toVal
10
}
11

12
app.mixin({
13
  custom: 'goodbye!',
14
  created() {
15
    console.log(this.$options.custom) // => "hello!"
16
  }
17
})

1
- Vue.config.performance=true;
2
+ app.config.performance=true;

app.directive#

教程文档

注册或获取全局指令。

1
import { createApp } from 'vue'
2
const app = createApp({})
3

4
// 注册
5
app.directive('my-directive', {
6
  // 指令的生命周期
7
  // 在绑定元素的父组件被挂载之前调用
8
  beforeMount(el, binding, vnode) {},
9
  // 在挂载绑定元素的父组件时调用
10
  mounted(el, binding, vnode) {},
11
  // 在更新包含组件的VNode之前调用
12
  beforeUpdate(el, binding, vnode, prevNode) {},
13
  // 组件的VNode及其子组件的VNode更新之后调用
14
  updated(el, binding, vnode, prevNode) {},
15
  // 在卸载绑定元素的父组件之前调用
16
  beforeUnmount(el, binding, vnode) {},
17
  // 在卸载绑定元素的父组件时调用
18
  unmounted(el, binding, vnode) {}
19
})
20

21
// 注册 (指令函数)
22
app.directive('my-directive', (el, binding, vnode, prevNode) => {
23
  // 这里将会被 `mounted` 和 `updated` 调用
24
})
25

26
// getter，返回已注册的指令
27
const myDirective = app.directive('my-directive')

• el: 指令绑定到的元素。这可以用来直接操作DOM。

• binding【包含下列属性的对象】

  • instance：使用指令的组件的实例

  • value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为 2

  • oldValue：指令绑定的前一个值，仅在 beforeUpdate 和 updated 钩子中可用。无论值是否改变都可用

  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"

  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

  • dir：一个对象，在注册指令时作为参数传递; 举个例子，看下面指令

    1
    app.directive('focus', {
    2
      mounted(el) {
    3
        el.focus()
    4
      }
    5
    })
    

    dir就是下面的对象

    1
    {
    2
      mounted(el) {
    3
        el.focus()
    4
      }
    5
    }
    

• vnode

  编译生成的虚拟节点

• prevNode

  前一个虚拟节点，仅在beforeUpdate和updated钩子中可用

  tips:除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

app.unmount 🚩➕#

在所提供的DOM元素上卸载应用程序实例的根组件

1
import { createApp } from 'vue'
2

3
const app = createApp({})
4
// 做一些必要的准备
5
app.mount('#my-app')
6

7
// 应用程序将在挂载后5秒被卸载
8
setTimeout(() => app.unmount('#my-app'), 5000)

app.component#

• Vue2.x【注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称】

  1
  // 注册组件，传入一个选项对象 (自动调用 Vue.extend)
  2
  
  3
  Vue.component('my-component', { /* ... */ })
  4
  
  5
  // 获取注册的组件 (始终返回构造器)
  6
  var MyComponent = Vue.component('my-component')
  

• Vue3【注册或获取全局组件. 注册还会自动使用给定的 name组件 设置组件的名称】全局组件

  基本vue2写法一致

  1
  import { createApp } from 'vue'
  2
  
  3
  const app = createApp({})
  4
  
  5
  // 注册组件，传入一个选项对象
  6
  app.component('my-component', {
  7
    /* ... */
  8
  })
  9
  
  10
  // 获取注册的组件 (始终返回构造器)
  11
  const MyComponent = app.component('my-component', {})
  

基础使用方法#

看文档

响应式方法 🚩➕#

例如：

1
import { ref, reactive } from 'vue'
2

3
// 提供者
4
setup() {
5
  const book = reactive({
6
    title: 'Vue 3 Guide',
7
    author: 'Vue Team'
8
  })
9
  const year = ref('2020')
10

11
 /*提供reactive响应式*/
12
  provide('book', book)
13
 /*提供ref响应式*/
14
  provide('year', year)
15
}

1
/*
2
 * @Author: 翁恺敏
3
 * @Date: 2022-04-10 16:11:32
4
 * @LastEditors: 翁恺敏
5
 * @LastEditTime: 2022-04-16 15:21:11
6
 * @FilePath: /vue3-vite-test/src/hooks/useProvide.ts
7
 * @Description: provide （observerable provide）
8
 */
9
import { provide, readonly, reactive, ref, isReactive } from "vue";
10
import forEach from "lodash/forEach";
11

12
const useProvide = (shouldReactive: Boolean = true) => {
13
  const handleProvide = (providers: Record<string, any>): void => {
14
    forEach(providers, (value, key) => {
15
      let provideValue;
16
      const isFunction = typeof value === "function";
17
      if (!isFunction) {
18
        provideValue =
19
          shouldReactive && !isReactive(value) ? ref(value) : value;
20
      }
21
      provide(key, isFunction ? provideValue : readonly(provideValue));
22
    });
23
  };
24

25
  return handleProvide;
26
};
27

28
export default useProvide;

组件使用#

vue2 --- v-model

1
<ChildComponent v-model="pageTitle" />
2

3
<!-- 简写: -->
4
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项：

1
<ChildComponent v-model="pageTitle" />

1
export default {
2
  model: {
3
    prop: 'title',
4
    event: 'change'
5
  },
6
  props: {
7
    // 这将允许 `value` 属性用于其他用途
8
    value: String,
9
    // 使用 `title` 代替 `value` 作为 model 的 prop
10
    title: {
11
      type: String,
12
      default: 'Default title'
13
    }
14
  }
15
}

所以，在这个例子中 v-model 的简写如下：

1
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

Vue2 --- v-bind.sync

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

1
this.$emit('update:title', newValue)

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

1
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

1
<ChildComponent :title.sync="pageTitle" />

Vue3 --- v-model

1
<ChildComponent v-model="pageTitle" />
2

3
<!-- 简写: -->
4

5
<ChildComponent
6
  :modelValue="pageTitle"
7
  @update:modelValue="pageTitle = $event"
8
/>
9

10
<ChildComponent v-model:title="pageTitle" />
11

12
<!-- 简写: -->
13

14
<ChildComponent
15
  :title="pageTitle"
16
  @update:title="pageTitle = $event"
17
/>

reactive#

desc: 接收一个普通对象然后返回该普通对象的响应式代理【等同于 2.x 的 Vue.observable()】

• ssss

  tips:Proxy对象是目标对象的一个代理器，任何对目标对象的操作（实例化，添加/删除/修改属性等等），都必须通过该代理器。因此我们可以把来自外界的所有操作进行拦截和过滤或者修改等操作

响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象

reactive 类的 api 主要提供了将复杂类型的数据处理成响应式数据的能力，其实这个复杂类型是要在object array map set weakmap weakset 这五种之中

因为是组合函数【对象】，所以必须始终保持对这个所返回对象的引用以保持响应性【不能解构该对象或者展开】例如 const { x, y } = useMousePosition()或者return { ...useMousePosition() }

1
function useMousePosition() {
2
    const pos = reactive({
3
        x: 0,
4
        y: 0,
5
      })
6

7
    return pos
8
}

toRefs API 用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref【把对象转成了ref】。

1
 function useMousePosition() {
2
    const pos = reactive({
3
        x: 0,
4
        y: 0,
5
      })
6
    return toRefs(pos)
7
}
8

9
// x & y 现在是 ref 形式了!
10
const { x, y } = useMousePosition()

ref#

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

1
const count = ref(0)
2
console.log(count.value) // 0

如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换

readonly#

传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理。一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的【返回一个永远不会变的只读代理】【场景可以参数比对等】

1
const original = reactive({ count: 0 })
2

3
const copy = readonly(original)
4

5
watchEffect(() => {
6
  // 依赖追踪
7
  console.log(copy.count)
8
})
9

10
// original 上的修改会触发 copy 上的侦听
11
original.count++
12

13
// 无法修改 copy 并会被警告
14
copy.count++ // warning!

isProxy#

检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

isReactive#

检查一个对象是否是由 reactive 创建的响应式代理

1
import { reactive, isReactive } from 'vue'
2
const state = reactive({
3
      name: 'John'
4
    })
5
console.log(isReactive(state)) // -> true

如果这个代理是由 readonly 创建的，但是又被 reactive 创建的另一个代理包裹了一层，那么同样也会返回 true

1
import { reactive, isReactive, readonly } from 'vue'
2
const state = reactive({
3
      name: 'John'
4
    })
5
// 用readonly创建一个只读响应式对象plain
6
const plain = readonly({
7
    name: 'Mary'
8
})
9
//readonly创建的，所以isReactive为false
10
console.log(isReactive(plain)) // -> false
11

12
// reactive创建的响应式代理对象包裹一层readonly,isReactive也是true,isReadonly也是true
13
const stateCopy = readonly(state)
14
console.log(isReactive(stateCopy)) // -> true

isReadonly#

检查一个对象是否是由 readonly 创建的只读代理

toRaw#

返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发更改。不建议一直持有原始对象的引用【**不建议赋值给任何变量**】。请谨慎使用

被**toRaw**之后的对象是没有被代理/跟踪的的普通对象

1
const foo = {}
2
const reactiveFoo = reactive(foo)
3

4
console.log(toRaw(reactiveFoo) === foo) // true
5
console.log(toRaw(reactiveFoo) !== reactiveFoo) // true

markRaw#

显式标记一个对象为“永远不会转为响应式代理”，函数返回这个对象本身。

【markRaw传入对象，返回的值是永远不会被转为响应式代理的】

1
const foo = markRaw({
2
    name: 'Mary'
3
})
4
console.log(isReactive(reactive(foo))) // false

被 markRaw 标记了，即使在响应式对象中作属性，也依然不是响应式的

1
const bar = reactive({ foo })
2
console.log(isReactive(bar.foo)) // false

shallowReactive#

只为某个对象的私有（第一层）属性创建浅层的响应式代理，不会对“属性的属性”做深层次、递归地响应式代理，而只是保留原样【第一层是响应式代理，深层次只保留原样(不具备响应式代理)】

1
const state = shallowReactive({
2
  foo: 1,
3
  nested: {
4
    bar: 2,
5
  },
6
})
7

8
// 变更 state 的自有属性是响应式的【第一层次响应式】
9
state.foo++
10
// ...但不会深层代理【深层次不是响应式】(渲染性能)
11
isReactive(state.nested) // false
12
state.nested.bar++ // 非响应式

shallowReadonly#

类似于shallowReactive，区别是：

• 第一层将会是响应式代理【第一层修改属性会失败】，属性为响应式
• 深层次的对象属性可以修改，属性不是响应式

1
const state = shallowReadonly({
2
  foo: 1,
3
  nested: {
4
    bar: 2,
5
  },
6
})
7

8
// 变更 state 的自有属性会失败
9
state.foo++
10
// ...但是嵌套的对象是可以变更的
11
isReadonly(state.nested) // false
12
state.nested.bar++ // 嵌套属性依然可修改

unref#

unref是val = isRef(val) ? val.value : val 的语法糖

1
unref(ref(0))===unref(0)===0   返回number
2

3
function useFoo(x: number | Ref<number>) {
4
  const unwrapped = unref(x) // unwrapped 一定是 number 类型
5
}

toRef#

toRef 可以用来为一个 reactive 对象的属性【某个属性区别toRefs每一个属性】创建一个 ref。这个 ref 可以被传递并且能够保持响应性

1
const state = reactive({
2
  foo: 1,
3
  bar: 2,
4
})
5

6
//reactive获取单个属性转为ref【fooRef只是一个代理】
7
const fooRef = toRef(state, 'foo')
8

9
fooRef.value++
10
console.log(state.foo) // 2
11

12
state.foo++
13
console.log(fooRef.value) // 3

toRefs#

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应

1
const state = reactive({
2
  foo: 1,
3
  bar: 2,
4
})
5

6
const stateAsRefs = toRefs(state)
7
/*
8
stateAsRefs 的类型如下:
9

10
{
11
  foo: Ref<number>,
12
  bar: Ref<number>
13
}
14
*/
15

16
// ref 对象 与 原属性的引用是 "链接" 上的
17
state.foo++
18
console.log(stateAsRefs.foo) // 2
19

20
stateAsRefs.foo.value++
21
console.log(state.foo) // 3

可以通过toRefs返回可解构的reactive，因为toRefs包裹之后返回一一对应的ref属性

1
function useFeatureX() {
2
  const state = reactive({
3
    foo: 1,
4
    bar: 2,
5
  })
6

7
  // 对 state 的逻辑操作
8

9
  // 返回时将属性都转为 ref
10
  return toRefs(state)
11
}
12

13
export default {
14
  setup() {
15
    // 可以解构，不会丢失响应性
16
    const { foo, bar } = useFeatureX()
17

18
    return {
19
      foo,
20
      bar,
21
    }
22
  },
23
}

isRef#

检查一个值是否为一个 ref 对象

customRef#

用于自定义一个 ref，可以显式地控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象【实际上就是手动 track追踪 和 trigger触发响应】

• 以下代码可以使得v-model防抖

1
function useDebouncedRef(value, delay = 200) {
2
  let timeout
3
  return customRef((track, trigger) => {
4
    return {
5
      get() {
6
          /*初始化手动追踪依赖讲究什么时候去触发依赖收集*/
7
        track()
8
        return value
9
      },
10
      set(newValue) {
11
          /*修改数据的时候会把上一次的定时器清除【防抖】*/
12
        clearTimeout(timeout)
13
        timeout = setTimeout(() => {
14
            /*把新设置的数据给到ref数据源*/
15
          value = newValue
16
            /*再有依赖追踪的前提下触发响应式*/
17
          trigger()
18
        }, delay)
19
      },
20
    }
21
  })
22
}
23

24
setup() {
25
    return {
26
        /*暴露返回的数据加防抖*/
27
      text: useDebouncedRef('hello'),
28
    }
29
  }

shallowRef#

创建一个 ref ，将会追踪它的 .value 更改操作，但是并不会对变更后的 .value 做响应式代理转换（即变更不会调用 reactive）

前面我们说过如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换,通过shallowRef创建的ref,将不会调用reactive【对象不会是响应式的】

1
const refOne = shallowRef({});
2
refOne.value = { id: 1 };
3
refOne.id == 20;
4
console.log(isReactive(refOne.value),refOne.value);//false  { id: 1 }

triggerRef 【与shallowRef配合】#

手动执行与shallowRef相关的任何效果

1
const shallow = shallowRef({
2
  greet: 'Hello, world'
3
})
4

5
// 第一次运行打印 "Hello, world"
6
watchEffect(() => {
7
  console.log(shallow.value.greet)
8
})
9

10
// 这不会触发效果，因为ref是shallow
11
shallow.value.greet = 'Hello, universe'
12

13
// 打印 "Hello, universe"
14
triggerRef(shallow)

调用时机#

• 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
• 如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文

参数#

• props 作为其第一个参数

注意 props 对象是响应式的，watchEffect 或 watch 会观察和响应 props 的更新

不要解构 props 对象，那样会使其失去响应性

1
export default {
2
  props: {
3
    name: String,
4
  },
5
  setup(props) {
6
    console.log(props.name)
7
     watchEffect(() => {
8
      console.log(`name is: ` + props.name)
9
    })
10
  },
11
}

• 第二个参数提供了一个上下文对象【从原来 2.x 中 this 选择性地暴露了一些 property（attrs/emit/slots）】

  attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值。所以可以解构，无需担心后面访问到过期的值

  为什么props作为第一个参数？

  • 组件使用 props 的场景更多，有时候甚至只使用 props
  • 将 props 独立出来作为第一个参数，可以让 TypeScript 对 props 单独做类型推导，不会和上下文中的其他属性相混淆。这也使得 setup 、 render 和其他使用了 TSX 的函数式组件的签名保持一致

  this 在 setup() 中不可用。由于 setup() 在解析 2.x 选项前被调用，setup() 中的 this 将与 2.x 选项中的 this 完全不同。同时在 setup() 和 2.x 选项中使用 this 时将造成混乱

  1
  setup(props, { attrs }) {
  2
      // 一个可能之后回调用的签名
  3
      function onClick() {
  4
        console.log(attrs.foo) // 一定是最新的引用，没有丢失响应性
  5
      }
  6
    }