1 创建vue3项目
- vue-cli：vue脚手架---》创建vue项目---》构建vue项目--》工具链跟之前一样- vite ：https://cn.vitejs.dev/-npm create vue@latest // 或者-npm create vite@latest一路选择即可-vue-cli跟之前一样-vite 创建的：npm install npm run dev-冷启动-热加载-按需编译
补充：链式调用
对象.changeName('lin').printName().showAge()class Person:def changeName(self,name):self.name=namereturn selfdef printName(self):print(self.name)return self
2 setup函数
setup的两个注意点
在beforeCreate之前执行一次，this是undefined。
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() {const name = 'lqz'let age = 19const showInfo = () => {alert(`姓名是：${name},年龄是：${age}`)}return {name, age, showInfo}},
}
</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>
import {ref} from 'vue'export default {setup() {let name = ref('lin')let age = ref(19)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>
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 = () => {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() {let 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(() => {const x1 = age.valueconst x2 = name.firstNameconsole.log('watchEffect配置的回调执行了')})return {name, fullName, age}}
}
</script>
6 生命周期
-想把生命周期写下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() {console.log('我是beforeCreate, 我和setup函数融合了')let name = ref('lin')console.log('我是Created, 我也和setup函数融合了')axios.get('http://localhost:8080/').then(res => {name.value = res.data.name})let t = setInterval(() => {console.log('lin')}, 3000)onBeforeMount(() => {console.log('挂载了')})onMounted(() => {console.log('挂载完成了')})onBeforeUpdate(() => {console.log('更新数据')})onUpdated(() => {console.log('数据更新完成')})onBeforeUnmount(() => {console.log('在组件卸载之前执行的操作')clearInterval(t)t = null})onUnmounted(() => {console.log('组件卸载完成')})return {}}}
</script>
7 torefs的使用
<template><div class="home"><h1>演示toRefs</h1>{{name}}是{{age}}岁了</div>
</template><script>import {reactive, toRefs} from "vue";export default {setup() {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写法
<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>
