vue3
1.vite的基本使用
创建项目
npm init vite-app 项目名称 或 yarn create vite-app 项目名称
安装依赖
npm i 或 yarn
启动项目
npm run dev 或 yarn dev2.创建vue应用
-
在main.js中导入createApp函数
-
定义App.vue组件，导入main.js
-
使用createApp函数基于App.vue组件创建应用实例
-
挂载至index.html的#app容器
App.vue
<template> <div class="container"> 我是根组件 </div> </template> <script> export default { name: 'App' } </script>main.js
// 创建一个vue应用 // 1. 导入createApp函数 // 2. 编写一个根组件App.vue，导入进来 // 3. 基于根组件创建应用实例 // 4. 挂载到index.html的#app容器 import {createApp} from 'vue' import App from './App.vue' let app = createApp(App) app.mount('#app')
3.组合API-setup函数
setup 组件初始化之前执行，它返回的数据和函数可在模版使用。
-
setup是一个新的组件选项，作为组件中使用组合API的起点。 -
从组件生命周期来看，它的执行在组件实例创建之前
vue2.x的beforeCreate执行。 -
这就意味着在
setup函数中this还不是组件实例，this此时是undefined -
在模版中需要使用的数据和函数，需要在
setup返回。
<template>
<div class="container">
<h1 @click="say()">{{msg}}</h1>
</div>
</template>
<script>
export default {
setup () {
let msg = 'hi vue3'
let say = () => {
console.log(msg)
}
return { msg , say}
}
}
</script>4.组合API-生命周期
组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同
vue2.x生命周期钩子函数：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
vue3.0生命周期钩子函数
setup创建实例前
onBeforeMount挂载DOM前
onMounted挂载DOM后
onBeforeUpdate更新组件前
onUpdated更新组件后
onBeforeUnmount卸载销毁前
onUnmounted卸载销毁后
5.组合API-reactive函数
reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据，通常用来定义响应式对象数据。
替代VUE2.0中data的一个函数 reactive函数 中只写数据即可。
<template>
<div class="container">
<div>{{obj.name}}</div>
<div>{{obj.age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup () {
// 普通数据
// let obj = {
// name: 'ls',
// age: 18
// }
let obj = reactive({
name: 'ls',
age: 18
})
// 修改名字
let updateName = () => {
console.log('updateName')
obj.name = 'zs'
}
return { obj ,updateName}
}
}
</script>6.组合API-toRef函数
toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。
<template>
<div class="container">
{{name}} <button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
let obj = reactive({
name: 'ls',
age: 10
})
// 2. 模板中只需要使用name数据
// 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
// let { name } = obj 不能直接解构，出来的是一个普通数据
let name = toRef(obj, 'name')
let updateName = () => {
// toRef转换响应式数据包装成对象，value存放值的位置
name.value = 'zs'
}
return {name, updateName}
}
}
</script>7.-组合API-toRefs函数
使用toRefs函数定义转换响应式中所有属性为响应式数据，通常用于解构|展开 reactive定义对象。
toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。
使用toRefs函数对data对象进行包装，确保使用扩展运算符进行解构之后，仍具有响应式
<template>
<div class="container">
<div>{{name}}</div>
<div>{{age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
let obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 解构或者展开响应式数据对象
// let {name,age} = obj
// console.log(name,age)
// let obj2 = {...obj}
// console.log(obj2)
// 以上方式导致数据就不是响应式数据了
let obj3 = toRefs(obj)
console.log(obj3)
let updateName = () => {
// obj3.name.value = 'zs'
obj.name = 'zs'
}
return {...obj3, updateName}
}
}
</script>8.组合API-ref函数
-
ref函数，常用于简单数据类型定义为响应式数据
-
再修改值，获取值的时候，需要.value
-
在模板中使用ref申明的响应式数据，可以省略.value
-
对于数据未知的情况下，ref 是最适用的
使用场景：
-
当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
-
其他情况使用ref
9.组合API-computed函数
computed函数，是用来定义计算属性的，计算属性不能修改。
计算属性两种用法
-
给computed传入函数，返回值就是计算属性的值
-
给computed传入对象，get获取计算属性的值，set监听计算属性改变
<template>
<div class="container">
<div>今年：{{age}}岁</div>
<div>后年：{{newAge}}岁</div>
<!-- 使用v-model绑定计算属性 -->
<input type="text" v-model="newAge">
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
// 得到后年的年龄
// const newAge = computed(()=>{
// // 该函数的返回值就是计算属性的值
// return age.value + 2
// })
// 2.计算属性高级用法，传人对象
const newAge = computed({
// get函数，获取计算属性的值
get(){
return age.value + 2
},
// set函数，当你给计算属性设置值的时候触发
set (value) {
age.value = value - 2
}
})
return {age, newAge}
}
}
</script>10.组合API-watch函数
watch 函数，是用来定义侦听器的
-
监听ref定义的响应式数据
第一个参数需要监听的目标
第二个参数，改变后触发的函数
let count = ref(0)
let add = () => {
count.value++
}
// 第一个参数需要监听的目标
// 第二个参数，改变后触发的函数
watch(count, (newVal, oldVal) => {
console.log(newVal, oldVal)
})2.监听 reactive定义的响应式数据
watch 可以监听reactive 任意属性的变化
let obj = reactive({
name: '张三',
age: 10,
car: {
id: 1,
name: '大奔'
}
})
let btn1 = () => {
obj.name = '李思'
}
// watch 可以监听reactive 任意属性的变化
watch(obj, () => {
console.log('数据变化')
})-
监听多个响应式数据数据
watch([count, obj], ()=>{ console.log('监听多个数据改变了') }) -
监听对象中，某一个属性的变化
需要写成函数返回该属性的方式才能监听到
watch(()=>obj.name,()=>{ console.log('监听obj.name改变了') }) -
深度监听和默认触发
watch(()=>obj.brand, ()=>{ console.log('brand数据改变了') },{ // 5. 需要深度监听 deep: true, // 6. 想默认触发 immediate: true })
11.组合API-ref属性
获取DOM或者组件实例可以适应ref属性
-
单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据
-
遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数
-
有一个边界问题：组件更新的时候会重复的设置dom元素给数组：
-
1.获取单个元素
先定义一个空的响应式数据ref定义的
setup中返回该数据，想获取哪个dom元素，在该元素上使用ref属性绑定该数据
<template>
<div>
<div ref="box">我是ref box</div>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
setup() {
let box = ref(null)
onMounted(() => {
console.log(box.value)
})
return { box }
}
}
</script>2.获取v-for遍历的DOM 或者组建
定义一个空数组，接收所有的LI 定义一个函数，往空数组push DOM
const domList = []
const setDom = (el) => {
domList.push(el)
}
onMounted(()=>{
console.log(domList)
})
return {dom, setDom}12.组合API-父子通讯
-
父传子：在setup种使用props数据
setup(props){ // props就是父组件数据 } -
子传父：触发自定义事件的时候emit来自
setup(props,{emit}){ // emit 就是触发事件函数 } -
在vue3.0中
v-model和.sync已经合并成v-model指令<Son v-model:money="money" />
13.组合API-依赖注入
使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。 provide函数提供数据和函数给后代组件使用 inject函数给当前组件注入provide提供的数据和函数
14.补充-v-model语法糖
在vue2.0中v-mode语法糖简写的代码
<Son :value="msg" @input="msg=$event" />在vue3.0中v-model语法糖有所调整
<Son :modelValue="msg" @update:modelValue="msg=$event" />vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue
vue2.0的 xxx.sync 语法糖解析 父传子 :xxx子传父 @update:xxx 在vue3.0 使用 v-model:xxx代替。
扫一扫
5082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
