Vue3.0 + Vite 搭建 + API详解【持续更新】

基于vite创建vue3 ,2种方式对比

  • npm create vite@lates
    自行配置 定制化选项
    在这里插入图片描述
    创建之后的目录:
    在这里插入图片描述

  • npm init vite-app vue3-vite
    需要快速开始一个Vue 3项目,不关心其他配置

    创建之后的目录:在这里插入图片描述

  • 包名称不同:
    npm init vite-app vue3-vite 需要全局安装 @vitejs/create-app。
    npm create vite@latest 需要全局安装 @vitejs/create-vite。

API

1. reactive 只适用于对象 (包括数组和内置类型,如 Map 和 Set,它不支持如 string、number 或 boolean 这样的原始类型)

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

注意:不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,必须始终保持对响应式对象的相同引用。不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:

js
let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失!)
state = reactive({ count: 1 })
对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:

js
const state = reactive({ count: 0 })

// 当解构时,count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

解构时也会失去响应式,可以使用toRefs 去转成响应式

2. toRefs

将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
消费者组件可以解构/展开返回的对象而不会失去响应性

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

注意toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef

3. ref() 则可以接受任何值类型。ref 会返回一个包裹对象,并在 .value 属性下暴露内部值

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

4. computed (具有缓存)

  • 接受一个 getter 函数,返回一个只读的响应式 ref 对象
  const count = ref(1)
  const plusOne = computed(() => count.value + 1)
  console.log(plusOne.value) // 2
  • 也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

5. 路由独享守卫 beforeEnter

  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: (to, form, next) => { // 路由独享守卫
      console.log(to, '路由独享守卫');
      next()
    }
  },

6. 得到路由信息 vue3/vue2 区别

vue3
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    let router = useRouter(); // router是全局路由实例,是VueRouter实例  
    let route = useRoute(); // route对象表示当前的路由信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录
    console.log(router, route, 'router')
   	router.push('/home') //路由跳转
   	 }
   }


vue2
this.$route.params
this.$router.push({
	path: '/home'
	params: {id: 1}
})
this.$route.query
this.$router.push({
	path: '/home'
	query: {id: 1}
})

7. ref() 获取dom

<template>
  <div class="home">
    <input type="text" ref="input">
  </div>
</template>

import { ref } from "vue";

const input = ref();
console.log(input, 'input')

在这里插入图片描述

8. setup 中无法获取this 是undefined,所有生命周期之前调用

应用

  • 如果想让对象变为响应式数据,使用erf 或 reactive
  • 如果想让一个对象的所有属性只读,使用readonly
  • 如果想要一个非对象数据变为响应式数据,使用ref
  • 如果想要根据已知的响应式数据得到一个新的响应式数据, 使用computed

vue3 的效率提升

1. 静态节点会被提升

  • 元素节点,没有动态绑定内容 会将节点从render函数提到外面,在vue2中 节点都写在render函数内部

2. 静态属性会被提升

在这里插入图片描述

3. 预字符串化

  • 当编译器遇到大量连续静态内容,会直接将其编译为一个普通字符串节点,只有动态节点需要记录
  • 在vue2中,会把每个元素变成一个虚拟节点

4. 缓存事件处理函数

  • 会判断缓存中有没有这个函数,有的话直接返回,没有的话直接给函数赋值,保证事件函数只处理一次

5. Block Tree

  • vue2在对比新旧树的时候,并不知道哪些节点是静态的,哪些节点是动态的,只能一层一层比较,浪费大部分时间在对比静态节点上
  • vue3 会记录动态节点 在根节点,直接对比块 block,循环数组

6. PatchFlag

patchFlag是在编译template模板时,给vnode添加的一个标识信息,这个标识信息反映了vnode的哪些部位绑定了动态值,这样在runtime阶段,可以根据patchFlag判断出哪些内容需要更新,实现靶向更新
  • vue2 会对比元素类型,属性, 子节点
  • vue3 仅比较内容
  • patchflag在这里插入图片描述
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤: 1. 安装 Node.js,推荐使用 LTS 版本。 2. 安装 Vite: ``` npm init vite-app my-project ``` 这里我们使用 Vite 初始化一个新项目,名称为 my-project。 3. 安装依赖: ``` cd my-project npm install ``` 4. 安装 Vue 3.0: ``` npm install vue@next ``` 5. 安装 Pinia: ``` npm install pinia ``` 6. 安装 TypeScript: ``` npm install --save-dev typescript ``` 7. 配置 TypeScript: 在项目根目录下创建 `tsconfig.json` 文件,内容如下: ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"], "exclude": ["node_modules"] } ``` 8. 安装 Pinia Devtools(可选): ``` npm install @pinia/devtools --save-dev ``` 9. 在 `main.ts` 中进行配置: ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 将 Pinia 实例挂载到 app 上 app.use(pinia) app.mount('#app') ``` 10. 编写组件: 在 `src` 目录下创建一个 `components` 目录,然后创建一个 `HelloWorld.vue` 组件: ```vue <template> <div> <h1>Hello, {{ name }}</h1> <button @click="increase">Increase</button> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'HelloWorld', setup() { const store = useStore() const name = store.getters.getName const count = store.state.count const increase = () => { store.commit('increase') } return { name, count, increase } }, }) </script> ``` 11. 在 `App.vue` 中使用组件: ```vue <template> <HelloWorld /> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld, }, }) </script> ``` 12. 运行项目: ``` npm run dev ``` 至此,我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值