目录
创建项目
vue_cli创建项目
vue_cli的安装见:https://www.cnblogs.com/smyz/p/17309086.html
使用vue_cli创建项目与创建vue2.0项目步骤相同
# 1. 进入到相关目录
# 2. 使用下面的命令进行创建
vue create 项目名称
vite创建项目
官网:http://www.vitejs.net/
npm工具的安装见:https://www.cnblogs.com/smyz/p/17309086.html
- 安装vite
# 1. 使用npm安装
npm init vue@latest # 如果安装了cnpm也可以使用 cnpm init vue@latest 会更快
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230418155558142-1592457209.png)
- 安装vuex
vuex分3.x版本和4.x版本,分别对应vue2.0与3.0,也就是,vue2.0只能安装vuex3.x版本,而vue3.0才能装vuex4.x版本。
vuex4.x版本安装官网:https://vuex.vuejs.org/zh/installation.html
# 使用-S参数,仅安装在此项目中
npm install vuex@next -S
# 在src目录中创建index.js,并添加如下内容:
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from "../App.vue";
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
const app = createApp({App})
// 将 store 实例作为插件安装
app.use(store)
export default store
# 3. 在src/main.js中注册
import store from './store'
app.use(router, store)
- 启动项目
npm run dev
常用API
setup()
- 在新的vue3项目中,不再推荐使用vue2.x配置方法。
- setup为Vue3.0中一个新的配置项,值为一个函数.
- setup是所有Composition API(组合API)编写的位置(组件中所用到的:数据、方法等等,均要配置在setup中)
- setup函数的返回值:返回一个对象,对象中的属性、方法, 在模板中均可以直接使用
- 注意:
- 尽量不要与vue2.x配置的方法混用。
- vue2.x中的配置(data,methods等)可以访问到setup中定义的属性和方法
- vue3.x中setup定义的属性方法无法访问vue2.x中的配置
- 尽量不要与vue2.x配置的方法混用。
基本使用示例
<template>
<div class="home">
<p>姓名:{{ username }}</p>
<p>年龄:{{ age }}</p>
<button @click="btnFunc">点我年龄加1</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
// 所有的内容都定义在setup函数中
setup() {
// 这种写法只能将内容放到页面中,但是并没有做双向数据绑定。也就是说,数据变了,页面中的内容不会发生变化
let username = 'Jack'
let age = 10
let btnFunc = () => {
age = age + 1
console.log(age)
}
// 定义的所有变量、函数都需要在return中返回
return {username, age, btnFunc}
}
}
</script>
- 根据下图可以看到,点击按钮后,值发生了改变,但页面却未发生变化。
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419094633315-230285231.png)
ref与reactive
- ref函数主要用于“字符串、数字”的双向数据绑定,但ref也可以用于“对象、数组”的双向数据绑定,但写起来会麻烦点
- reactive函数主要用于“对象、数组”的双向数据绑定
- 在使用前需要先导入,注意不要把import命令写到export中,会报错
ref与reactive
ref测试
姓名:{{ username }}
年龄:{{ age }}
reactive测试
游戏:{{ game.name }}
价格:{{ game.price }}
<div style="float: left;width: 250px; height: 200px; margin: 30px 30px 30px 30px; border: solid black">
<h1 align="center">ref对对象的测试</h1>
<p align="center">游戏:{{ game2.name }}</p>
<p align="center">价格:{{ game2.price }}</p>
<p align="center"><button @click="btnFunc3">点我价格加10块钱</button></p>
</div>
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419101352853-1795411388.png)
toRef与toRefs
- 作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。
- 语法:const name = toRef(person,'name')
- 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
- 扩展:toRefs 与toRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)
<template>
<div class="home">
<p>name: {{ name }}</p>
<p>age: {{ age }}</p>
<p>name2: {{name2}}</p>
<p>age2: {{age2}}</p>
</div>
</template>
<script>
// 导入ref和reactive方法,目的是作双向数据绑定
// ref函数主要用于“字符串、数字”的双向数据绑定
// reactive函数主要用于“对象、数组”的双向数据绑定
// toRefs为解构赋值
import {ref, reactive, toRefs} from 'vue' // import命令注意不要写到export中
export default {
name: 'HomeView',
setup() {
let person = reactive({
name: 'JACK',
age: 19
})
let person2 = reactive({
name2: 'rose',
age2: 18
})
// 使用toRefs后,页面中调用时直接使用{{key}}即可,不需要{{person.name}}这种了
// 多个键不能冲突
return {...toRefs(person), ...toRefs(person2)}
}
}
</script>
计算属性computed
- 计算属性在vue2.x中是写到computed中
- 计算属性定义:https://www.cnblogs.com/smyz/p/17308948.html
- 监听属性在vue2.x中是写到watch中
- 在vue3.x中需要使用import导入computed方法【 import {computed} from 'vue' 】
示例
<template>
<div class="home">
<p>游戏1:{{ game1.name }},价格:{{ game1.price }}日元 购买数量:<input type="text" v-model="game1.num"></p>
<p>游戏2:{{ game2.name }},价格:{{ game2.price }}日元 购买数量:<input type="text" v-model="game2.num"></p>
<p>总价格:{{ totalPrice }}日元</p>
</div>
</template>
<script>
// 导入要使用的方法
import {reactive, computed, watch} from 'vue'
export default {
name: 'HomeView',
// 所有的内容都定义在setup函数中
setup() {
// 定义两个示例变量
let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
// 定义计算属性,当值发生改变时,计算属性函数会自动执行,并将最终的值返回给变量,页面中只需要把值当面一个变量使用即可
let totalPrice = computed(() => {
return game1.price*game1.num + game2.price*game2.num
}
)
// 最后不要忘记返回定义的各个变量
return {game1, game2, totalPrice}
}
}
</script>
- 效果如下图
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419104758315-1612755197.gif)
监听属性watch
- 监听属性之前的博客:https://www.cnblogs.com/smyz/p/17309054.html
- 监听属性就是监视一个属性,当被监听属性发生改变时,就会触发此监听属性的执行。说白了就是相当于oracle的触发器
- 监听属性可以获取到改前的值和改后的值
- 要使用监听属性需要导入相关函数 这【 import {watch} from 'vue' 】
示例
<template>
<div class="home">
<p>游戏1:{{ game1.name }},价格:{{ game1.price }}日元 购买数量:<input type="text" v-model="game1.num"></p>
<p>游戏2:{{ game2.name }},价格:{{ game2.price }}日元 购买数量:<input type="text" v-model="game2.num"></p>
</div>
</template>
<script>
// 导入要使用的方法
import {reactive, watch} from 'vue'
export default {
name: 'HomeView',
// 所有的内容都定义在setup函数中
setup() {
// 定义两个示例变量
let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
// 定义计算属性,当值发生改变时,计算属性函数会自动执行,并将最终的值返回给变量,页面中只需要把值当面一个变量使用即可
watch(game1,(newNum, oldNum) => {
console.log('《赛尔达传说:王国之泪》的数量变为:',game1.num)
console.log('我是改后的值', newNum)
console.log('我是改前的值', oldNum)
})
watch(game2,(newNum, oldNum)=>{
console.log('《皮克敏4》的数量变为:',game2.num)
console.log('我是改后的值', newNum)
console.log('我是改前的值', oldNum)
})
// 最后不要忘记返回定义的各个变量
return {game1, game2}
}
}
</script>
- 可以看到,修改的值以后,触发了watch中的执行,但如果修改的值与原值相同,相当于未发生改变,就不会触发watch属性的执行。
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419112054785-831869070.gif)
监听属性watchEffect
- watchEffect 不需要指定监听的属性,他会自动进行依赖收集,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行,不像 watch 只能监听指定的属性。
- 在初始化页面的时候会先执行一次
示例
<template>
<div class="home">
<br>
<br>
<br>
<br>
<p>游戏1:{{ game1.name }},价格:{{ game1.price }}日元 购买数量:<input type="text" v-model="game1.num"></p>
<p>游戏2:{{ game2.name }},价格:{{ game2.price }}日元 购买数量:<input type="text" v-model="game2.num"></p>
</div>
</template>
<script>
// 导入要使用的方法
import {reactive, watch, watchEffect} from 'vue'
export default {
name: 'HomeView',
// 所有的内容都定义在setup函数中
setup() {
// 定义两个示例变量
let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
// 不需要指定监听属性,只要在函数中调用了一个属性,那么这个属性发生改变就会被触发
watchEffect(
// 可以看到并未指定监听哪个属性
()=>{
// 只是在函数体内调用了一下
console.log('测试watchEffect的变化,game1.num改变了:', game1.num)
}
)
return {game1, game2}
}
}
</script>
- 如下图:当刷新页面时会先执行一下watchEffect中定义的内容。
- 当值未发生变化不会触发
- 当值发生变化就会触发
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419124454911-1007988415.gif)
新的生命周期钩子函数
![](/i/l/?n=23&i=blog/3049770/202304/3049770-20230419124928000-1046848352.png)
- Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
- Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
- beforeCreate ===> setup()
- created ===> setup()
- beforeMount ===> onBeforeMount
- mounted ===> onMounted
- beforeUpdate ===> onBeforeUpdate
- updated ===> onUpdated
- beforeUnmount ===> onBeforeUnmount
- unmounted ===> onUnmounted
使用vite创建的项目
- 使用vite创建的项目,在script标签中有一个属性为 setup,当有了这个属性后,就不再需要写setup函数,上面所有的内容都可以直接写到script中,直接使用即可。也不需要再return出去