vue3介绍
Vue3的变化:
1、vue3完全兼容vue2，但是vue3不建议用vue2的写法
2、拥抱TypeScript，ts完全兼容js
3、组合式API和配置项API
vue2 是配置项api
vue3 组合式api
vue3项目创建和启动
# 创建vue3项目：
vue-cli 官方不太建议用了
vite 目前官方推荐：新一代前端构建工具# vue-cli创建：
命令行中：vue create vue3_demo001
其他跟之前一样，只是选vue版本选3版本
# vue3的项目简单解释：
// main.js import { createApp } from 'vue' // 通过 createApp创建vue实例 import App from './App.vue' // 根组件 import router from './router' // vue-router import store from './store' // vuex var vue = createApp(App) // 创建vue实例 vue.use(store)// 使用vuex vue.use(router)// 使用vue-router vue.mount('#app')// 挂在index.html中得div# 其他写起来跟之前写vue2完全一致，vue3是兼容的
# vite创建vue3（速度快）
不管是创建项目还是运行项目速度都很快，因为它按需编译，不再等待整个应用编译完成cnpm create vite vue3_demo002 //创建项目 cnpm install // 打开项目，安装依赖 npm run dev // 运行项目# 使用vite和vue3创建项目的文件简单解释:
// main.js import { createApp } from 'vue' import './style.css' import App from './App.vue' createApp(App).mount('#app') # 没有使用第三方插件// HelloWorld.vue 组合式api写法，跟之前不一样了 <script setup> import { ref } from 'vue' defineProps({ msg: String, }) const count = ref(0) </script> <template> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="count++">count is {{ count }}</button> </div> </template># 实现：创建vue2一样，自由选择一些插件, 在vue3上，建议使用 pinia 做状态管理
# 常用的第三方插件，自己选即可:
npm create vue@latest
setup函数
# vue3_demo001 :vue-cli创建的---写法跟之前vue2一样
vue3_demo002 ：vite创建，但是没有状态管理器和路由
vue3_demo003：vite创建，有状态管理器和路由# setup 函数，只有vue3中有：
setup为Vue3.0中一个新的配置项，值为一个函数
setup是所有Composition API（组合API）编写的位置
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
# 注意：
1、尽量不要与Vue2.x配置混用
2、Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法
3、但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
4、如果有重名, setup优先
<template> <div class="home"> <h1>setup函数的使用</h1> {{ name }}--{{ age }} <button @click="add">点我年龄+1</button> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'HomeView', setup() { let age = 19 let add = () => { // 默认不是响应式的 age++ } return {name, age, add} }, } </script>
vue3之ref
# 1、ref 用来做 基础变量 [数字，字符串，布尔] 的响应式
reactive 用来做对象 [数组，字典] 的响应式<script> import { ref,reactive } from "vue"; export default { name: 'HomeView', setup(){ let name = ref('zjq') let age = ref('21') let add = () => { age.value++ console.log(age.value) } let handleChange = (newname) => { name.value = newname } return {name,age,add,handleChange} }} </script># 2、在子组件中暴露
<script setup> import {ref, reactive,} from "vue"; const helloworld = ref() // 变量名必须跟 在组件上定义的名字一致 function handleClick() { console.log(helloworld.value) // helloworld.value拿到组件对象 // 使用组件对象的属性和方法,需要子组件暴露---》只能用子组件暴露的 helloworld.value.add() console.log(helloworld.value.person.name)} </script> <template> <HelloWorld ref="helloworld"></HelloWorld> <button @click="handleClick">点我看控制台</button> </template>
vue3之toRefs
# 响应式：
toRefs 可以把对象内部的所有值，都做成响应式
改这些变量会影响到原来对象中得值const person = reactive({name: 'lqz', age: 19}) let {name, age:nl} = toRefs(person) // 等同于： name=ref(lqz) age=ref(19) // let {name, age} = person // 等同于： name=lqz age=19 function add() { nl.value++ console.log(nl.value) }# 结构赋值：
let person = {name: 'lqz', age: 19} let {name, age} = person // 普通解构赋值，name=person.name age=person.age let {name:a, age} = person // 重命名解构赋值：a=person.name age=person.age console.log(a) console.log(age)# 对象解压：
<script> import {toRefs, reactive,} from 'vue' export default { name: 'HomeView', setup() { let data = reactive({ name: 'lqz', age: 19, hobby: '篮球' }) let xx = {...toRefs(data)} // {name:lqz,age:19,bobby:篮球} // 可以把对象解压 return {...toRefs(data), count} // {name:lqz,age:19,bobby:篮球,count:0} },} </script># toRef的使用:
const person = reactive({name: 'lqz', age: 19}) // const name=toRefs(person) //{name:ref(name),age:ref(age)} const name = toRef(person, 'name') //name=ref(person.name) function change() { name.value = 'xxx' }
vue3之reactive
<template> <div class="home"> <h1>setup函数的使用</h1> <p>用户名：{{ userInfo.name }}</p> <p>年龄：{{ userInfo.age }}</p> <p>爱好：{{ userInfo.hobby }}</p> <button @click="handleAdd">点我年龄+1</button> </div> </template> <script> import {ref, reactive} from 'vue' export default { name: 'HomeView', setup() { let userInfo = reactive({ name: 'lqz', age: 19, hobby: '篮球' }) let handleAdd = () => { userInfo.age++ console.log(userInfo) } return {userInfo, handleAdd} }, } </script># ref和reactive总结：
ref函数：
作用: 定义一个响应式的数据
语法: let xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
reactive函数：
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：let 代理对象= reactive(接收一个对象，返回一个代理对象
reactive定义的响应式数据是“深层次的”,对象无论多少层，都可以
vue3之axio
# 安装：
cnpm install axios# 在 setup 中直接发送请求
import axios from 'axios' const filmList = reactive({result:[]}) axios.get('http://127.0.0.1:8000/film/').then(res => { console.log(res.data) filmList.result = res.data.results })# async 和 await 的使用
const filmList = reactive({result: []}) async function load() { // await必须写在被async修饰的函数中,也可以写在setup函数中 let response = await axios.get('http://127.0.0.1:8000/film/') filmList.result = response.data.results } load()# axios 的拦截器
请求发出之前的拦截器
请求响应回来的拦截器
判断状态码是不是100，如果是100，继续走，不是100，直接弹错误
计算属性computed
let person=reactive({name:lqz,age:19}) # 1 只取值 person.hobby=computed(()=>{ return person.name+person.age }) # 2 取值和赋值 person.hobby=computed({ get(){ return 'xxxx' }, set(newValue){ } })
<template> <div class="home"> <h1>计算属性：computed</h1> <p>姓：<input type="text" v-model="person.firstName"></p> <p>名：<input type="text" v-model="person.lastName"></p> <p>全名：{{ person.fullName }}</p> <p>全名修改：<input type="text" v-model="person.fullName"></p> </div> </template> <script> import {ref, reactive, computed} from 'vue' export default { name: 'HomeView', setup() { let person = reactive({ firstName: '', lastName: '' }) // 计算属性---》修改值 person.fullName = computed({ get() { return person.firstName +person.lastName }, set(newValue) { console.log(newValue) person.firstName=newValue.substring(0,1) person.lastName=newValue.slice(1) } }) return {person} }, } </script>
监听属性watch
<template> <div class="home"> <h1>监听属性：watch</h1> {{ age }} ==== <button @click="handleClick">点我+1</button> <hr> <p>用户名：{{ userInfo.name }}</p> <button @click="handleChange">点我变长名字</button> </div> </template> <script> import {ref, reactive, watch, computed} from 'vue' export default { name: 'HomeView', setup() { let age = ref(0) let handleClick = () => { age.value++ } // 1 监听基本类型 watch(age, (newValue, oldValue) => { console.log(oldValue) console.log(newValue) }) // 2 监听对象 let userInfo = reactive({ name: 'zjq', age: 19 }) let handleChange = () => { userInfo.name = '谢谢谢谢谢寻寻寻寻' } watch(() => userInfo.name, (newValue, oldValue) => { console.log('名字变了：' + userInfo.name) }) // 3 同时监听多个变量变化 watch([age,], (newValue, oldValue) => { console.log('age或msg变化了', newValue, oldValue) }) return {age, handleClick, userInfo, handleChange} }, } </script>
生命周期
vue2 : 8个生命周期钩子
beforeCreate：组件创建之前实现这个：组件html，js--》html和js都是空的
created：组件创建完成后：js就有值了，html还是空的 （向后端发送ajax请求）
beforeMount：挂载模板之前，js有值，模板(html) 还是空的（向后端发送ajax请求）
mounted：挂载完成：js有值，模板有值
beforeUpdate：只要页面发送变化或js变量发生变化，就会触发它的执行
updated：刷新之后执行
beforeDestroy：被销毁之前执行 （资源清理性工作）
destroyed：被销毁之后执行
vue3 中变成：
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeDestroy==>onBeforeUnmount
destroyed=====>onUnmounted<template> <div class="home"> <h1>生命周期</h1> {{ name }} <br> <button @click="handleClick">点我变名字</button> </div> </template> <script> import {ref,reactive,watch,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue' import axios from 'axios' export default { name: 'HomeView', setup() { //1 这里写的代码，就是 beforeCreate，没有数据[变量没定义]，没挂载 console.log('beforeCreate') // 2 这里写代码，就是created,有数据，变量定义了，没挂载 let name = ref('lqz') axios.get('http://127.0.0.1:8000/film/').then(res => { name.value = res.data.msg }) // 3 onMounted onMounted(() => { console.log('挂载完了') }) // 4 onUpdated onUpdated(() => { console.log('页面更新') }) // 5 onUnmounted onUnmounted(() => { console.log('组件销毁') }) let handleClick = () => { name.value = 'afdasdfasdfasdf' } return {name, handleClick} },} </script>
setup写法
# 以后都使用组合式api
# 典型写法:
<script setup lang="js" name="组件名字">
</script>不需要return，它会自动return
如果注册局部组件，只需要导入组件即可，在template中就可以使用了
# 以后只需要在 setup 内，写变量，写函数即可const age=ref(0) function add(){ age.value++ }# vue-router的使用
路由跳转：import {useRouter, useRoute} from 'vue-router' const router = useRouter() // 就是以前的this.$router const route = useRoute() // 就是以前的this.$route路由注册---跟之前一模一样
路由的api---跟之前一样:
router.push({name:'home'})路由嵌套，跟之前一样
路由守卫跟之前一样：
router.beforeEach()<template> <h1>我是首页</h1> <div>{{ name }}</div> <button @click="handleChange">点我变名字</button> <button @click="load">点我加载</button> <div v-for="film in filmList"> <p>{{ film.name }}</p> </div> <HelloWorld msg="lqz is handsome"></HelloWorld> <RouterLink to="/about"><button>点我跳转到about</button></RouterLink> <button @click="handleGo">点我跳转到about</button> {{ store.count }} <button @click="handleAdd">点击+1</button> </template> <script setup lang="js"> //1 以后这里面写的，就相当于 写在setup函数中,现在不需要返回，在template都能用到 import {ref,reactive} from 'vue' let name = ref('lqz') let handleChange = () => { name.value = 'sadfasdfafs' console.log(name) } // 2 加载电影数据 import {ref, reactive} from 'vue' import axios from 'axios' let filmList = reactive([]) //发送ajax let load = () => { axios.get('http://127.0.0.1:8000/film/').then(res => { filmList = res.data.results console.log(filmList) }) } // 3 注册组件 import HelloWorld from '@/components/HelloWorld.vue' // 4 路由跳转 setup中没有this了---》想用谁，就是导入谁 this.$router.push() // 用不了了 import {useRouter, useRoute} from 'vue-router' const router = useRouter() const route = useRoute() let handleGo = () => { router.push('/about?name=lqz') } </script>
pinia和elementui-plus
# 之前用vuex，vue3上还可以用，但是使用 pinia 更好
import {useCounterStore} from '@/stores/counter' const store = useCounterStore() console.log(store.count)# elementui-plus
npm install element-plus --save// main.js中： import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
登录练习
使用setup写法
elmentui 登录 显示电影
没登录不允许访问首页--->重定向到登录
