【vue讲解：vue3介绍、setup、ref、reactive、监听属性、生命周期、toRef、setup写法】

1 vue3介绍

# Vue3的变化-vue3完全兼容vue2---》但是vue3不建议用vue2的写法-拥抱TypeScript-之前咱们用的JavaScript---》ts完全兼容js- 组合式API和配置项APIvue2 是配置项apivue3 组合式api# vue4必须要用

2 vue3项目创建和启动

# 创建vue3项目-vue-cli   官方不太建议用了-vite      目前官方推荐：新一代前端构建工具# vue-cli创建-命令行中：vue create vue3_demo001-其他跟之前一样，只是选vue版本选3版本-使用pycharm打开---》配置启动--》跟之前一样

2.1vue3的项目简单解释

### main.js
import { createApp } from 'vue' # 通过 createApp创建vue实例
import App from './App.vue'  # 根组件
import router from './router' # vue-router
import store from './store' #vuexvar vue = createApp(App) # 创建vue实例
vue.use(store)#使用vuex
vue.use(router)# 使用vue-router
vue.mount('#app')# 挂在index.html中得div### 其他写起来跟之前写vue2完全一致，vue3是兼容的

2.2 vite创建vue3

# 速度很快-创建项目还是运行项目
# 按需编译，不再等待整个应用编译完成# 创建项目cnpm create vite vue3_demo002# 打开项目，安装依赖cnpm install # 运行项目npm run dev# pycharm运行项目# 使用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># 后期我们可以自己引入 vuex，pina，vue-router，代码需要自己写
# 实现：创建vue2一样，自由选择一些插件-以后再vue3上，建议使用pinia 做状态管理
npm create vue@latest  # 常用的第三方插件，自己选即可

3 setup

# 1 vue3_demo001 :vue-cli创建的---》写法跟之前vue2一样先在这上面讲
# 2 vue3_demo002 ：vite创建，但是没有状态管理器和路由 （不用它了）
# 3 vue3_demo003：vite创建，有状态管理器和路由  在这上面讲# setup 函数，只有vue3中有setup为Vue3.0中一个新的配置项，值为一个函数setup是所有Composition API（组合API）编写的位置组件中所用到的：数据、方法等等，均要配置在setup中setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
#注意：尽量不要与Vue2.x配置混用Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置（data、methos、computed...）。如果有重名, setup优先。

<template><div class="home"><h1>setup函数的使用</h1>{{ name }}--{{ age }}<br><button @click="add">点我年龄+1</button></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',setup() {// vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了// 1 定义变量,跟正常写js一样let name = 'lqz'let age = 19// 2 定义一个函数，点击按钮，年龄加一的函数let add = () => {// alert('111')// 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的age++console.log(age)}// 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用return {name, age, add}},
}
</script>

4 ref

# ref 用来做 基础变量[数字，字符串，布尔]的响应式
# reactive用来做 对象[数组，字典]的响应式

<template><div class="home"><h1>setup函数的使用</h1>{{ name }}--{{ age }}<br><button @click="add">点我年龄+1</button><br><button @click="handleChange('彭于晏')">点我变彭于晏</button></div>
</template><script>import {ref, reactive} from 'vue'export default {name: 'HomeView',setup() {// vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了// 1 定义变量,跟正常写js一样let name = ref('lqz')// let age = 19  // 没有响应式let age = ref(19)  // 有响应式,变成对象了// 2 定义一个函数，点击按钮，年龄加一的函数let add = () => {// alert('111')// 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的// age++   自增，就不能这么写了age.value++  //有响应式console.log(age.value)}let handleChange = (n) => {name.value = n  //有响应式}// 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用return {name, age, add, handleChange}},
}
</script>

5 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>

5.1 ref和reactive总结

# ref函数作用: 定义一个响应式的数据语法: let xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据： xxx.value模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div># 备注：接收的数据可以是：基本类型、也可以是对象类型。
# reactive函数作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）语法：let 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）reactive定义的响应式数据是“深层次的”,对象无论多少层，都可以

6 监听属性-计算属性

6.1 计算属性

<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(() => {//   return person.firstName + person.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>

6.2 监听属性

<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: 'lqz',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>

7 生命周期

# vue2 : 8个生命周期钩子# vue3中变成beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated =======>onUpdatedbeforeUnmount ==>onBeforeUnmountunmounted =====>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 onMountedonMounted(() => {console.log('挂载完了')})// 4 onUpdatedonUpdated(() => {console.log('页面更新')})// 5 onUnmountedonUnmounted(() => {console.log('组件销毁')})let handleClick = () => {name.value = 'afdasdfasdfasdf'}return {name, handleClick}},//配置项api====》变了最后俩// beforeCreate() {// },// created() {// },// beforeMount() {// },// mounted() {// },// beforeUpdate() {// },// updated() {// },// beforeUnmount() {// },// unmounted() {// }}
</script>

8 toRef

<template><div class="home"><h1>toRef函数</h1>{{ name }}---{{ age }}---{{ hobby }}---{{ count }}</div></template><script>import {ref,toRefs,reactive,
} from 'vue'export default {name: 'HomeView',setup() {let data = reactive({name: 'lqz',age: 19,hobby: '篮球'})let count = ref(0)let xx = {...toRefs(data)}  // {name:lqz,age:19,bobby:篮球}console.log(xx)// 可以把对象解压return {...toRefs(data), count}   // {name:lqz,age:19,bobby:篮球,count:0}},}
</script>

9 setup写法

<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>--><hr><el-button type="primary">Primary</el-button><br><el-switch v-model="value1"/></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')
// }// 5 pinia的使用
// import {useCounterStore} from '@/stores/counter'
// // 可以在组件中的任意位置访问 `store` 变量 ✨
// const store = useCounterStore()
// // console.log(store.count)
// let handleAdd = () => {
//   store.count++
// }// 6 使用elementui
import {ref} from 'vue'let value1 = ref(true)</script>

作业

# 使用setup写法elmentui 登录 显示电影没登录不允许访问首页--》重定向到登录