创建vue3项目、链式调用、setup函数、ref函数、reactive函数、计算和监听属性、vue3的生命周期、torefs的使用、vue3的setup写法

1 创建vue3项目

# 两种方式- vue-cli：vue脚手架---》创建vue项目---》构建vue项目--》工具链跟之前一样- vite ：https://cn.vitejs.dev/-npm create vue@latest // 或者-npm create vite@latest一路选择即可# 运行vue3项目-vue-cli跟之前一样-vite 创建的：npm install   npm run dev# vite为什么这么快-冷启动-热加载-按需编译

补充：链式调用

# 编程语言的链式调用对象.changeName('lin').printName().showAge()# python 如何实现链式调用class Person:def changeName(self,name):self.name=namereturn selfdef printName(self):print(self.name)return self

2 setup函数

# 使用 vue-cli创建的项目讲setup的两个注意点
# setup执行的时机在beforeCreate之前执行一次，this是undefined。# setup的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。# 总结：setup执行是在beforeCreate，没有this对象，以后不要用this了如果写setup函数，想接收父组件自定义属性传入的值，需要export default {setup(props) {console.log(props.msg)},props: ['msg']}如果是vue3的最新写法，想接收父组件自定义属性传入的值，需要<script setup>defineProps(['msg'])</script>

<template><div class="home"><p>我的名字是：{{ name }}</p><p>我的年龄是：{{ age }}</p><button @click="handleClick">点我看信息</button></div>
</template><script>
export default {setup() {// 1 定义数据const name = 'lqz'let age = 19// 2 定义方法const showInfo = () => {alert(`姓名是：${name},年龄是：${age}`)}return {name, age, showInfo}},// 注意：不要混用//   methods: {//   handleClick() {//     alert(`姓名是：${this.name},年龄是：${this.age}`)//   }// }
}
</script>

3 ref函数

<template><div class="home"><p>我的名字是：{{ name }}</p><p>我的年龄是：{{ age }}</p><button @click="handleAdd">点我年龄+1</button><button @click="handleChangeName">点我秒变彭于晏</button></div>
</template><script>// 变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
// 普通变量，通过ref绑定响应式
// 引用类型变量：通过reactive 绑定响应式import {ref} from 'vue'export default {setup() {// 1 定义数据let name = ref('lin')let age = ref(19)// 2 定义方法const handleAdd = () => {age.value += 1console.log(typeof age)}const handleChangeName = () => {name.value = '彭于晏'}return {name, age, handleAdd,handleChangeName}}
}
</script>

4 reactive函数

<template><div class="home"><p>我的名字是：{{ data.name }}</p><p>我的年龄是：{{ data.age }}</p><p>我的爱好是：{{ hobby }}</p><button @click="addAge">点我年龄+1</button><br>{{ obj.hobby }}<br><button @click="changeHobby">点我把保龄球换成足球</button><hr><HelloWorld msg="asdfasdfasdfasdf"></HelloWorld></div>
</template><script>// 变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
// 普通变量值类型，通过ref绑定响应式   数字，字符串
// 引用类型变量：通过reactive 绑定响应式   对象，数组import {reactive, ref} from 'vue'export default {setup(props) {let hobby = ref('篮球')let obj = ref({age: 99,hobby: '保龄球'})const changeHobby = () => {console.log(obj)obj.value.hobby = '足球'}let data = reactive({name: '彭于晏',age: 19})const addAge = () => {//data.age++console.log(typeof data)console.log(data) // 是一个代理对象,无法拿出原来对象，但是操作起来跟操作源对象一样data.age++}return {hobby, data, addAge, obj, changeHobby}}}
</script>-------------------------------------------------------------------------ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。reactive
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式# 总结：如果用基本数据类型：数字，字符串，布尔，用ref做响应式如果是对象类型，用ref和reactive都可以，但是建议使用reactive如果使用ref包裹对象类型，多了一层value

补充：element-plus

1.官网https://element-plus.org/
2.安装npm install element-plus --save
3.使用import { xxx } from 'element-plus'

5 计算和监听属性

<template><div class="home"><input type="text" v-model="name.firstName"><input type="text" v-model="name.lastName"><br><input type="text" v-model="fullName"><button @click="age++">点我年龄加</button></div>
</template><script>import {computed, watch, reactive, ref,watchEffect} from 'vue'export default {name: 'HomeView',setup() {// 计算属性：computedlet name = reactive({firstName: 'lin',lastName: 'dj'})let fullName = computed({get() {return name.firstName + '-' + name.lastName},set(value) {const nameArr = value.split('-')name.firstName = nameArr[0]name.lastName = nameArr[1]}})let age = ref(19)// 监听属性// 监听基本类型watch(age, (newValue, oldValue) => {console.log(oldValue)console.log(newValue)})// 监听对象watch(() => name.firstName, (newValue, oldValue) => {console.log(oldValue)console.log(newValue)})// watchEffect函数watchEffect(() => {const x1 = age.valueconst x2 = name.firstNameconsole.log('watchEffect配置的回调执行了')})return {name, fullName, age}}
}/*
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。reactive
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式# 总结：如果用基本数据类型：数字，字符串，布尔，用ref做响应式如果是对象类型，用ref和reactive都可以，但是建议使用reactive如果使用ref包裹对象类型，多了一层value*/
</script>

6 生命周期

# vue2 生命周期---8个# vue3 变了-想把生命周期写下setup函数中-把生命周期写在配置项中beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedbeforeCreatecreatedbeforeMount mountedbeforeUpdateupdatedbeforeUnmount unmounted

<template><div class="home"><h1>八个生命周期钩子</h1></div>
</template><script>
import axios from 'axios'import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
} from "vue";export default {// setup()函数setup() {// 生命周期// 第一个beforeCreateconsole.log('我是beforeCreate, 我和setup函数融合了')let name = ref('lin')// 第二个Createdconsole.log('我是Created, 我也和setup函数融合了')axios.get('http://localhost:8080/').then(res => {name.value = res.data.name})let t = setInterval(() => {console.log('lin')}, 3000)// 第三个onBeforeMountonBeforeMount(() => {console.log('挂载了')})// 第四个onMountedonMounted(() => {console.log('挂载完成了')})// 第五个onBeforeUpdateonBeforeUpdate(() => {console.log('更新数据')})// 第六个onUpdatedonUpdated(() => {console.log('数据更新完成')})// 第七个onBeforeUnmountonBeforeUnmount(() => {console.log('在组件卸载之前执行的操作')clearInterval(t)t = null})// 第八个onUnmountedonUnmounted(() => {console.log('组件卸载完成')})return {}}}
</script>

7 torefs的使用

<template><div class="home"><h1>演示toRefs</h1><!--    {{userinfo.name}}是{{userinfo.age}}岁了-->{{name}}是{{age}}岁了</div>
</template><script>import {reactive, toRefs} from "vue";export default {// setup()函数setup() {// let userinfo = reactive({//   name: 'lin',//   age: 20// })//// return {userinfo}// 或者let data = reactive({name: 'lin',age: 20})return {...toRefs(data)}}// 对象的解压
let data ={'name':'lin',age:19}
let dict={...data,hobby:'篮球'}console.log(dict)</script>

8 vue3 setup写法

# 以后vue3推荐，把setup函数的代码，直接写在script中
<script setup>
定义变量
写函数
不用return，在html中直接使用
</script># 使用组件，直接导入，不需要配置，直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用：<HelloWorld msg="hello"></HelloWorld># 自定义属性，在子组件中接收<script setup>defineProps({msg: {type: String,required: true}})</script>

<template><hello-world msg="hello"></hello-world>{{name}}<p><button @click="changeName">点我看是谁</button></p>
</template><script setup>
import HelloWorld from "../components/HelloWorld.vue"
import {ref} from 'vue'let name = ref('lin')let changeName = () => {name.value = '彭于晏'
}</script>