官网 API:https://composition-api.vuejs.org/#summary
1.创建项目
// 先升级 vue-cli 到 4.x 版本
npm install -g @vue/cli
// 通过脚手架创建项目,一路回车就行
vue create vue3.0
(这一步实际上用的仍然是 2.x 的版本)
2.升级 2.x 版本到 3.0 beta版本
这一步命令执行需要进入上一步创建好的项目 vue3.0
文件夹中
// 安装完 vue/cli 后,可以使用 vue add 添加插件
// 目前 3.0 对应的是 vue-next 项目
vue add vue-next
安装完 vue-next 以后,我们就发现本地项目已经升级到了 3.0 ,打开 main.js 可以看到与之前的项目内容有所不同
3.LifeCycle 生命周期介绍
vue 3 生命周期发生了很大的变化
原方法 | 升级后 |
---|---|
beforeCreate | setup |
created | setup |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestory | onBeforeUnmount |
destoryed | onUnmounted |
4.composition API 介绍
- reactive API
- ref API
- watch API
- cpmputed API
- 生命周期钩子变化
- TypeScript 和 JSX 支持
reactive
作用:创建响应式对象,非包装对象,类似于在 2.x 的 data
中声明变量
// 打开 App.vue,删除多余代码
<template>
<div id="app">
<h1>{{title.name}}</h1>
</div>
<!-- 此处可以并列多个 div ,不再要求一个根元素了 -->
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const title = reactive({
name: '欢迎学习 Vue3.0'
})
return { title }
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
页面效果图
ref
作用:创建一个包装式对象,含有一个响应式属性 value
它和 reactive 的差别就是,前者没有包装属性 value
<template>
<div id="app">
<h1>{{title.name}}</h1>
<p>{{user}}</p>
</div>
<!-- 此处可以并列多个 div ,不再要求一个根元素了 -->
</template>
<script>
import { reactive, ref } from 'vue'
export default {
name: 'App',
setup() {
const title = reactive({
name: '欢迎学习 Vue3.0'
})
const user = ref('我是 ref 创建出来的')
// 如果需要修改值,可以通过 value
user.value = '我被改变了'
return { title, user }
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
事件处理
既然不用 methods ,那事件处理该怎么调用方法?
<template>
<div id="app">
<h1>{{title.name}}</h1>
<p>{{user}}</p>
<button @click="updateUser">修改名称</button>
</div>
<!-- 此处可以并列多个 div ,不再要求一个根元素了 -->
</template>
<script>
import { reactive, ref } from 'vue'
export default {
name: 'App',
setup() {
const title = reactive({
name: '欢迎学习 Vue3.0'
})
const user = ref('我是 ref 创建出来的')
const updateUser = () => {
// 如果需要修改值,可以通过 value
user.value = '我被改变了'
}
return { title, user, updateUser }
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
onMounted/computed
作用:周期函数和计算函数
<template>
<div id="app">
<h1>{{title.name}}</h1>
<p>{{user}}</p>
<button @click="updateUser">修改名称</button>
<p>count值:{{count}}</p>
<p>当前 count: {{computedCount}}</p>
<button @click="increment">修改 count</button>
</div>
<!-- 此处可以并列多个 div ,不再要求一个根元素了 -->
</template>
<script>
import { reactive, ref, onMounted, computed } from 'vue'
export default {
name: 'App',
setup() {
const title = reactive({
name: '欢迎学习 Vue3.0'
})
const user = ref('我是 ref 创建出来的')
const updateUser = () => {
// 如果需要修改ref 创建的值,可以通过 value
user.value = '我被改变了'
}
// 生命周期方法
onMounted(() => {
console.log('init onMounted...')
})
// 初始化 count 值
const count = ref(0)
const increment = () => {
count.value ++
}
// 调用计算属性函数 Hook
// 注意 computed 后面没有大括号 {}
const computedCount = computed(() => count.value * 2)
return { title, user, updateUser, count, increment, computedCount }
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>