Vue3-初学入门
Vue3 简介
1. 了解相关信息
- vue.js 3.0 它支持vue 2.0 的大多数特性
- 更好的支持 TypeScript
2. 性能提升
- 减小打包的数据占用空间
- 渲染更快速
- 内存减少
- 使用
Proxy
代替defineProperty
实现数据响应式 - 重写虚拟 DOM 的实现和 Tree-Shaking
3.新增特性
-
Composition(组合)API
-
setup
- ref 和 reactive
- computed 和 watch
- 新增的生命周期钩子函数
- provide 与 inject
- 等等
-
新组件
- Fragment - 文档碎片
- /Teleport - 瞬移组件的位置
- Suspense - 异步加载组件的 loading 界面
-
其它 API 更新
- 全局 API 的修改
- 将原来的全局 API 转移到应用对象
- 模板语法变化
创建Vue3项目有两种方式
1.可以使用vue-cli
2.可以使用vite
vue3 部分源码解析
<template>
<!-- vue2 中的html 模板中必须有一个根标签,vue3 组件的html 模板中可以没有根标签 -->
<img alt="vue logo" src="./assets/logo.png">
<!-- 使用这个子级组件 -->
<Helloworld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>
<script>
//这里可以使用ts的代码
//defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
import { defineComponent } from 'vue';
//引入一个子级组件
import HelloWorld from "./components/HelloWorld.vue"
//暴露出去一个定义好的组件
export default defineComponent({
// 当前组件的名字是App
name:"App",
components:{
// 注册一个子组件
HelloWorld
}
});
</script>
<style>
#app{
// 写全局样式
}
</style>
Composition API(常用部分1.2.3)
1.setup 初了解
很简单,很明了
- 新的option , 所有的组合API函数都在此使用,只在初始化时执行一次
- 函数如果返回对象,对象中的属性或方法,模板中可以直接使用
2.ref
- 作用: 定义一个数据的响应式
- 语法: const xxx = ref(initValue):
- 创建一个包含响应式数据的引用(reference)对象
- js 中操作数据: xxx.value
- 模板中操作数据: 不需要.value
- 一般用来定义一个基本类型的响应式数据
<template>
<h2>{{ count }}</h2>
<hr />
<button @click="update">更新</button>
</template>
<script>
import { ref } from 'vue'
export default {
/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
// data () {
// return {
// count: 0
// }
// },
// methods: {
// update () {
// this.count++
// }
// }
/* 使用vue3的composition API */
setup() {
// 定义响应式数据 ref对象
const count = ref(1)
console.log(count)
// 更新响应式数据的函数
function update() {
// alert('update')
count.value = count.value + 1
}
return {
count,
update
}
}
}
</script>
3. reactive
- 作用: 定义多个数据的响应式
- const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
- 响应式转换是“深层的”:会影响对象内部所有嵌套的属性
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
<template>
<h2>name: {{ state.name }}</h2>
<h2>age: {{ state.age }}</h2>
<h2>wife: {{ state.wife }}</h2>
<hr />
<button @click="update">更新</button>
</template>
<script>
/*
reactive:
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
*/
import { reactive } from 'vue'
export default {
setup() {
/*
定义响应式数据对象
*/
const state = reactive({
name: 'tom',
age: 25,
wife: {
name: 'marry',
age: 22
}
})
console.log(state, state.wife)
const update = () => {
state.name += '--'
state.age += 1
state.wife.name += '++'
state.wife.age += 2
}
return {
state,
update
}
}
}
</script>