vue3 开发总结

官网vue2和vue3混杂在一起介绍比较，读起来比较费劲，本文是官网主要知识点的提炼和总结，定位于比较长时间没开发，已经遗忘的情况下，快速查询常用功能，不用再比较费劲地再看官网。初学者还是去官网学。

一、安装

• 通过脚手架 Vite：

  npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue
  

• 通过脚手架 vue-cli：

  npm install -g @vue/cli # 或 yarn global add @vue/cli
  vue create hello-vue3
  # 选择 vue 3 preset

二、vscode 插件Volar

三、新增组合式api

作用：将逻辑相关的代码聚合在一个地方，使代码更清晰，更容易维护。

        组合式api可以通过setup配置项目使用，不过这种写起来比较麻烦，不做介绍了，vue3.2 提供了单文件组件

ref响应式变量

使用包含value的对象方式，是为了防止传递过程中响应性丢失。

补充：对于vue暴露出来的方法，如果不想每次都去写import,可以使用unplugin-auto-import插件，使用方法请自行百度。

定义props

defineEmits

声明提供的事件，同事支持对事件进行校验。

vue3 v-on 的 .native 修饰符已被移除。没有用defineEmits什么的事件，都会被当做组件的原生组件，应用到根元素上。看这里

自定义事件还支持进行验证，详细看这里

defineExpose 

暴露属性和方法给外部使用

defineProps、defineEmits、defineExpose 不需要引入，可以直接使用。

生命周期

此外

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount

watch

当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组被改变时触发回调，必须指定 deep 选项。

computed 

全局注册组件

import { createApp } from 'vue'
import MyComponent from '@/components/MyComponent'
const app = createApp({})

// 注册一个名为my-component的组件
app.component('my-component', MyComponent)

// 检索注册的组件(始终返回构造函数)
const MyComponent = app.component('my-component')

指令

全局注册指令使用app.directive，指令钩子已做了重命名，更好理解了。

过滤器

过滤器移除了，可以采用config.globalProperties定义全局函数替代。config.globalProperties本身是用于替代 Vue.prototype ，可以参考这里

在网上查到其他人注册全局方法的思路

setup 中代码变大怎么办
 

代码集中在setup中会使代码变大，可将代码按逻辑独立出去

import { ref, computed } from 'vue'

// 独立逻辑代码
export default function useSearch(param) {
  const searchQuery = ref('')
  const search = function(){
  
  }

  return {
    searchQuery,
    search
  }
}

与普通的 

顶层 await

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

注意

async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。

四、teleport vue 的传送门功能

  
A

teleport 内部的元素将渲染到id为modals的元素中。

五、Provide / Inject

// 在入口中
app.provide('guide', 'Vue 3 Guide')

// 在子组件中
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `
{{ book }}
`
}

六、组件双向数据绑定 v-model实现变化

app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    
  `
})

还支持多个v-model绑定，和自定义修饰符看这里

七、css 支持通过v-bind动态设置

八、普通的ref获取元素

v-for 中的 Ref 数组

九、响应式api

reactive返回对象的响应式副本，看了网上一些人说：“ref正对基础数据类型，reactive针对对象”。其实试了一下，ref也可以用于复杂对象，建议模板中使用更多的是用ref，ref可以很轻松的对整个对象进行替换，如果是reactive，需要对每一个键进行赋值，才会变化。

toRaw

返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true

shallowReactive

创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式

与 reactive 不同，任何使用 ref 的 property 都不会被代理自动解包

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身

toRef

 响应型对象一旦被销毁或展开,其响应式特性就会丢失。toRef可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

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

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref,
  bar: Ref
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

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

当从组合式函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开：

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

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

computed

接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

watch

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

插槽没有什么变化，直接看文档

十、其他一些变化

1、支持了多根节点的组件

2、同一个元素上，v-if 比 v-for 优先级更高

3、createApp返回一个应用实例，替代Vue 2.x 有许多全局 API 和配置，避免了测试期间的全局污染。

 4、全局api采用具名导出，更好的支持 tree-shaking

5、