1.setup 為什么不能使用this？
a：因?yàn)樵趕etup中為了避免使用this，因?yàn)樗粫?huì)在組件實(shí)例上面找到揉阎；setup調(diào)用時(shí)methods 和 計(jì)算屬性等 都是在解析之前庄撮，所以setup沒有辦法使用this
2.reactive的使用(將數(shù)據(jù)變成響應(yīng)式)
<template>
<h3 @click="h3click">{{obj.name}}</h3>
</template>
setup(){
const objs = reactive({
name:why
})
const h3click = () => {
objs.name = "xxxx"
}
return{
objs,h3click
}
}
3.ref的使用(變成響應(yīng)式數(shù)據(jù))
<template>
//在template 里面會(huì)有淺層解包
<h3 @click="h3click">{{count}}</h3>
</template>
setup(){
const count = reactive(0)
const h3click = () => {
count.value ++
}
return{
count,h3click
}
}
4.readonly（數(shù)據(jù)不可改變的,只讀的）
<template>
<div class="home">
<h3>{{ objs.name }}</h3>
<button @click="h3click">++</button>
</div>
</template>
<script>
import { reactive, readonly } from 'vue'
export default {
name: 'Home',
setup() {
// 普通對(duì)象
const obj1 = {
name: xxx
}
// 不可改變的數(shù)據(jù)
const read1 = readonly(obj1)
// 響應(yīng)式數(shù)據(jù)reactive
let objs = reactive({
name: 'xxx'
})
// 不可改變的數(shù)據(jù)
const read = readonly(objs)
// ref響應(yīng)式數(shù)據(jù)
const objs2 = ref({ name: 'xxx' })
// 不可改變的數(shù)據(jù)
const read2 = readonly(objs2)
const h3click = () => {
read.name = 'xxxgg'
}
return { h3click, objs }
}
}
</script>
5.isReactive，判斷是否包裹了reactvie創(chuàng)建的代理他也會(huì)返回true
<template>
//在template 里面會(huì)有淺層解包
<h3 @click="h3click">{{count}}</h3>
</template>
setup(){
// 普通對(duì)象
const obj1 = {
name: 'xxx'
}
// 不可改變的數(shù)據(jù)
const read1 = readonly(obj1)
// ref響應(yīng)式數(shù)據(jù)
const objs2 = ref({ name: 'xxx' })
// 不可改變的數(shù)據(jù)
const read2 = readonly(objs2)
// 響應(yīng)式數(shù)據(jù)reactive
let objs = reactive({
name: 'xxx'
})
// 不可改變的數(shù)據(jù)
const read = readonly(objs)
const h3click = () => {
const falg = isReactive(read1)//false
const falg1 = isReactive(read2)//false
const falg2 = isReactive(read)//true
}
return{
count,h3click
}
}
6.toRefs的使用:(進(jìn)行對(duì)reactive 數(shù)據(jù)進(jìn)行結(jié)構(gòu))必須是在reactive中使用
<template>
//在template 里面會(huì)有淺層解包
<h3 @click="h3click">{{name}}</h3>
</template>
setup(){
// 響應(yīng)式數(shù)據(jù)reactive
let objs = reactive({
name: 'xxx'
})
//const {name} = toRefs(objs)
const h3click = () => {
//name.value = "gggg"
objs.name = "ggg"
}
return{
//name,
...toRefs(objs)
h3click
}
}
7.toRef的使用必須是在reactive中使用
<template>
//在template 里面會(huì)有淺層解包
<h3 @click="h3click">{{name}}</h3>
</template>
setup(){
// 響應(yīng)式數(shù)據(jù)reactive
let objs = reactive({
name: 'xxx'
})
const name = toRef(objs,"name")
const h3click = () => {
name.value = "gggg"
}
return{
name,
h3click
}
}
8.computed的使用
<template>
<div class="home">
<h3>{{ fullName }}</h3>
<button @click="h3click">++</button>
</div>
</template>
<script>
import { reactive, readonly, isReactive, ref, toRefs, computed } from 'vue'
export default {
name: 'Home',
setup() {
const firstName = ref('zkl')
const lastName = ref('why')
// 方法一使用
// const fullName = computed(() => firstName.value + ' ' + lastName.value)
// 第二中g(shù)et 和set的用發(fā)
const fullName = computed({
get: () => firstName.value + ' ' + lastName.value,
set: (newValue) => {
let names = newValue.split(' ')
firstName.value = names[0]
lastName.value = names[1]
}
})
const h3click = () => {
fullName.value = 'coder why'
}
return { h3click, fullName }
}
}
</script>
9.watchEffect自動(dòng)收集響應(yīng)式的依賴
<template>
<div class="home">
<h3>{{ fullName }}</h3>
<button @click="h3click">++</button>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
name: 'Home',
setup() {
const fullName = ref(12)
// 基本使用
// watchEffect(() => {
// console.log(fullName.value, '數(shù)量')
// })
// 取消監(jiān)聽數(shù)據(jù)
// const stop = watchEffect(() => {
// console.log(fullName.value, '數(shù)量')
// })
// const h3click = () => {
// fullName.value++
// if (fullName.value >= 25) {
// // 取消監(jiān)聽
// stop()
// }
// }
// 取消副作用
watchEffect(
(clerVal) => {
console.log(fullName.value)
let timer = setTimeout(() => {
console.log('發(fā)送請(qǐng)求')
}, 1300)
clerVal(() => {
console.log('333')
clearTimeout(timer)
})
},
//調(diào)整執(zhí)行順序
{
// flush:"pre"http://默認(rèn)值
// flush:"post"http://dome加載完后使用這個(gè)參數(shù)
}
)
const h3click = () => {
fullName.value++
}
return { h3click, fullName }
}
}
</script>
10.watch的使用
<template>
<div class="home">
<h3>{{ info.name }}</h3>
<button @click="h3click">++</button>
</div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
export default {
name: 'Home',
setup() {
const info = reactive({ name: 'zkl' })
const names = ref("why")
// 傳日一個(gè)get函數(shù)
// watch(
// () => info.name,
// (newValue, oldValue) => {
// console.log(newValue + 'x', oldValue + 'j')
// }
// )
//1. 監(jiān)聽reactive響應(yīng)對(duì)象和ref響應(yīng)數(shù)據(jù)
// 監(jiān)聽reactive對(duì)象
watch(info, (newValue, oldValue) => {
console.log(newValue + 'x', oldValue + 'j')
})
// 將reactive響應(yīng)對(duì)象轉(zhuǎn)換成普通對(duì)象
// watch(
// () => {
// return {
// ...info
// }
// },
// (newValue, oldValue) => {
// console.log(newValue,'x', oldValue, 'j')
// }
// )
// 2.監(jiān)聽ref對(duì)象
const names = ref('zkl')
watch(names, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
//監(jiān)聽多條數(shù)據(jù)
watch([info, names], ([newValue, oldValue], [newname, oldname]) => {
console.log(newValue, oldValue, newname, oldname)
})
//深度監(jiān)聽和立即監(jiān)聽
//深度監(jiān)聽和立即監(jiān)聽毙籽，watch默認(rèn)是深度監(jiān)聽的如果洞斯。如果使用結(jié)構(gòu)賦值就不能深度監(jiān)聽
const info = reactive({
name: 'zkl',
firend: {
name: 'why'
}
})
watch(
() => ({ ...info }),
(newInfo, oldInfo) => {
console.log(newInfo, oldInfo)
},
{
deep: true, //深度監(jiān)聽
immediate: true //立即執(zhí)行
}
)
const h3click = () => {
info.firend.name = 'xxx'
}
const h3click = () => {
info.name = 'xxx'
names.value = 'jjj'
}
return { h3click, info }
}
}
</script>
11.onMounted，onUnmounted,onUpdated,的使用（生命周期）
<template>
<div class="home">
<button @click="getCount">++</button>
{{ counter.counter }}
<abuto :counter="counter" />
</div>
</template>
<script>
import { ref, onMounted, onUnmounted, onUpdated } from 'vue'
import abuto from './About.vue'
export default {
components: {
abuto
},
name: 'Home',
setup() {
const counter = ref({
counter: 0
})
const getCount = () => counter.value.counter++
onMounted(() => {
console.log('onMounted 的使用')
})
onUpdated(() => {
console.log('頁(yè)面發(fā)生改變的時(shí)候')
})
onUnmounted(() => {
console.log('銷毀執(zhí)行')
})
return {
getCount,
counter
}
}
}
</script>
12.provide和inject的使用（父和孫組件的時(shí)候使用）
//父組件
<template>
<div class="home">
<button @click="getCount">++</button>
{{ counter.counter }}
<abuto />
</div>
</template>
<script>
import { ref, provide, readonly } from 'vue'
import abuto from './About.vue'
export default {
components: {
abuto
},
name: 'Home',
setup() {
const counter = ref({
counter: 0
})
const getCount = () => counter.value.counter++
//孫組件不可以修改數(shù)據(jù) readonly
provide('counterValue', readonly(counter))
return {
getCount,
counter
}
}
}
</script>
//孫組件
<template>
<div class="about">
<h1>{{ value.counter }}</h1>
<button @click="editClick">修改父組件數(shù)據(jù)</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const value = inject('counterValue')
const editClick = () => value.value++
return { value, editClick }
}
}
</script>
13.自定義指令局部指令
<template>
<div class="home">
<input type="text" v-fouret="'cc'" />
</div>
</template>
<script>
export default {
directives: {
fouret: {
created(el, bings) {
console.log(el)
},
mounted(el, bings, vonde, newNode) {
console.log(oldnode)
//el:獲取的dom元素
//bings：自定義指令傳值和修飾符
el.focus()
}
}
},
name: 'Home',
}
</script>
14.自定義指令案例(全局組件)
<template>
<div class="home">
<h1 v-formatTime="'YYYY/MM/DD'">{{ content }}</h1>
</div>
</template>
<script>
export default {
name: 'Home',
setup() {
const content = 1644547805
return { content }
}
}
</script>
//app里面定義全局組件
<script>
import dayjs from 'dayjs'
export default function (app) {
app.directive('formatTime', {
mounted(el, bindgs) {
let formString = 'YYYY-MM-DD HH:mm:ss'
const textContent = el.textContent
let timestamp = parseInt(textContent)
if (textContent.length === 10) {
timestamp = timestamp * 1000
}
if (bindgs.value) {
formString = bindgs.value
}
el.textContent = dayjs(timestamp).format(formString)
}
})
}
</script>
15.這樣獲取全局屬性
//main.js
app.config.globalProperties.$name = '煩死了'
//其他地方使用
import { getCurrentInstance } from 'vue'
//獲取全局內(nèi)容
const { appContext } = getCurrentInstance()
console.log(appContext.config.globalProperties.$name)
