一、vue-cli升级 1、安装 `npm install -g @vue/cli

OR

yarn global add @vue/cli`

#升级 `yarn global upgrade --latest @vue/cli

OR

npm update -g @vue/cli 2、创建项目 vue create my-project

OR

vue ui`

step1:

default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

TypeScript 支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

图片:

如果出现这个就代表安装成功了，图片:

----注 如果安装下来发现不能实现热更新，这个时候可以想想是不是用cnpm （yarn）去安装的可以再用 npm install

`main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import './router/permission.js' import 'dayjs/locale/zh-cn' import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

app.config.globalProperties.foo = 'bar' // 注册全局属性 // app.config.globalProperties.$axios = axios app.use(ElementPlus, { locale }) element 引入 app.use(store) app.use(router) app.mount('#app')`

**引入element ** vue add element-plus

router.js

`import { createRouter, createWebHistory } from 'vue-router'

// 代替mode: history const routerHistory = createWebHistory() const router = createRouter({ history: routerHistory, routes: routes // 路由表 })`

接下来我会从以下几个属性及常用的方法，将2.0和3.0进行一些对比：

setup
Props
Emit
Data
Method
LifeCycle
Computed
Components

setup的使用

生命周期的与vue2的不同点在：beforeCreated、created都在setup()里进行默认调用，其他的都要写在setup()里面，算做compositionAPI。

props: { name: String, num: Number }, setup (props, ctx) { // setup (props, { emit }){} props.name // 获取props的name的值 ctx.emit('add', value) // 在子组件中使用emit像父组件传递值，与vue2中的this.$emit()有较大区别 }

setup()的第一个参数是props(不可进行解构，否则会丢失双向绑定)，第二个参数是context

props：由父组件传过来的值会自动被响应式，注意不能在子组件里直接修改props的值

context： 3个值 attrs,slots,emit,(可进行解构)

Data <template> <div class="hello"> 123 </div> <div>{{name.name}}</div> </template> import {reactive} from 'vue' export default { setup(){ const name = reactive({ name:'hello 番茄' }) const tag= ref(20) return { name， tag } } }

1、reactive： toRefs

import { reactive, toRefs } from "vue"; export default { setup() { // 注意事项: reactive的对象不可以结构返回或导入, 会导致失去响应式 const obj = reactive({ name: "金毛", age: 4 }); function addObj() { obj.age++; } return { ...obj, // 这样写不好, 里面会失去响应式 obj, // 这样写那么外面就要都基于obj来调取, 类型{{obj.age}} ...toRefs(obj) // 必须是reactive生成的对象, 普通对象不可以, 他把每一项都拿出来包了一下, 我们可以这样用了 {{age}}, 放心咱们多深的obj也可以响应 } } }

** 2、ref:**

import { ref } from "vue"; export default { // 1: 这个版本基本逻辑都在setup里面完成了, 有人说把他当成2.x的data. setup() { // 2: 定义一个追踪的变量,也就是双向绑定. const n = ref(1); // 生成的n是一个对象, 这样方便vue去监控它 function addN() { n.value++; // 注意这里要使用.value的形式, 因为n是对象↑, value才是他的值 } return { n, // 返回出去页面的template才可以使用它, {{n}} 不需要.value addN } } }

之前的ref获取dom元素该怎么处理？

` <div> <div ref="content">第一步, 在dom上面定义, 他会有一个回调</div>

</div> <ul> <li>v-for 出来的ref</li> <li>可以写为表达式的形式, 可以推导出vue是如何实现的</li> <li>vue2.x的时候v-for不用这么麻烦, 直接写上去会被组装成数组</li> <li :ref="el => { items[index] = el }" v-for="(item,index) in 6" :key="item">{{item}}</li> </ul>`

** js**

`import { ref, onMounted, onBeforeUpdate } from "vue"; export default { setup() { // 2: 定义一个变量接收dom, 名字无所谓, 但是与dom统一的话会有很好的语义化 const content = ref(null); const items = ref([]);

// 4: 在生命周期下, 这个值已经完成了变化, 所以当然第一时间就拿到
onMounted(() => {
  console.log(content.value);
  console.log("li标签组", items.value);
});

// 5: 确保在每次变更之前重置引用
onBeforeUpdate(() => {
  items.value = [];
});

// 3: 返出去的名称要与dom的ref相同, 这样就可以接收到dom的回调
return {
  content,
  items
};

} };`

生命周期 2.x与 3.0的对照

```
beforeCreate -> 使用 setup()
```
```
created -> 使用 setup()
```
```
beforeMount -> onBeforeMount
```
```
mounted -> onMounted
```
```
beforeUpdate -> onBeforeUpdate
```
```
updated -> onUpdated
```
```
beforeDestroy -> onBeforeUnmount
```
```
destroyed -> onUnmounted
```
```
errorCaptured -> onErrorCaptured
```

路由 `<template>

vuex

import { useStore } from 'vuex'

const store = useStore()

// 1: 单个引入 const name = computed(() => store.state.name); // 2: 引入整个state const state = computed(() => store.state); console.log("vuex的实例", state.value); // 别忘了.value // 3: 方法其实就直接从本体上取下来了 const updateName = newName => store.commit("updateName", newName); // 4: action一个意思 const deferName = () => store.dispatch("deferName"); store.dispatch('user/setTokenAndUserInfo', { token: token, userInfo }) // 5: getter 没变化 const routes = computed(() => store.getters.routes)

composition <template>

<div> <button @click="addN1">上面的增加</button>---> {{n1}} </div> <div> <button @click="addN2">下面的增加</button>---> {{n2}} <button @click="addN210">每次n2+10</button> </div> <div> <p>组件里面也可以如此引用, 这就可以代替mixin一部分功能了</p> <button @click="addN3">n3的增加</button>---> {{n3.value}} </div> <div> <com></com> </div> </template>

写在任何地方, 然后导入就成了mixin

import { reactive } from 'vue';

export default ()=> { const n3 = reactive({ name: 'mixin', value: 1 }) const addN3=()=>{ n3.value++ } return { n3, addN3 } } 插件的新思路 // 开发插件并不一定要挂载到vue的原型上 // 导致vue原型臃肿, 命名冲突等等(比如两个ui都叫 message) // 原理就是 provide 和 inject, 依赖注入.

import {provide, inject} from 'vue';

// 这里使用symbol就不会造成变量名的冲突了, 这个命名权交给用户才是真正合理的架构设计 const StoreSymbol = Symbol()

export function provideString(store){ provide(StoreSymbol, store) }

export function useString() {

const store = inject(StoreSymbol)

return store } app.vue页面统一的初始化一下 export default { setup(){ // 一些初始化'配置/操作'可以在这里进行 // 需要放在对应的根节点, 因为依赖provide 和 inject provideString({ a:'可能我是axios', b:'可能我是一个message弹框' }) } } 在需要使用的组件里面接收 <template>

<div> 插件的演示 </div> </template>

新观察者 <template>

新计算属性 <template>

<div> <button @click="addCount">点击计算</button> <button @click="setCount(1)">点击出发set</button> <p>count--{{count}}</p> <p>count2--{{count2}}</p> <p>count3--{{count3}}</p> </div> </template>

customRef防抖 <template>

组件与注入

父级 <template>

自组件 <template>

<div>props的属性不用setup去return --- {{type}}</div> </template>

什么是Composition API 如果你还不知道，Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。

来源：oschina

链接：https://my.oschina.net/u/3608045/blog/4944231

标签

uploader

reactive

element

vuex

vue3.0的使用

OR

OR

OR