1.setup 为什么不能使用this？
a：因为在setup中为了避免使用this，因为他不会在组件实例上面找到；setup调用时methods 和 计算属性等 都是在解析之前，所以setup没有办法使用this
2.reactive的使用(将数据变成响应式)
<template>
<h3 @click="h3click">{{obj.name}}</h3>
</template>
setup(){
const objs = reactive({
name:why
})
const h3click = () => {
objs.name = "xxxx"
}
return{
objs,h3click
}
}
3.ref的使用(变成响应式数据)
<template>
//在template 里面会有浅层解包
<h3 @click="h3click">{{count}}</h3>
</template>
setup(){
const count = reactive(0)
const h3click = () => {
count.value ++
}
return{
count,h3click
}
}
4.readonly（数据不可改变的,只读的）
<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() {
// 普通对象
const obj1 = {
name: xxx
}
// 不可改变的数据
const read1 = readonly(obj1)
// 响应式数据reactive
let objs = reactive({
name: 'xxx'
})
// 不可改变的数据
const read = readonly(objs)
// ref响应式数据
const objs2 = ref({ name: 'xxx' })
// 不可改变的数据
const read2 = readonly(objs2)
const h3click = () => {
read.name = 'xxxgg'
}
return { h3click, objs }
}
}
</script>
5.isReactive，判断是否包裹了reactvie创建的代理他也会返回true
<template>
//在template 里面会有浅层解包
<h3 @click="h3click">{{count}}</h3>
</template>
setup(){
// 普通对象
const obj1 = {
name: 'xxx'
}
// 不可改变的数据
const read1 = readonly(obj1)
// ref响应式数据
const objs2 = ref({ name: 'xxx' })
// 不可改变的数据
const read2 = readonly(objs2)
// 响应式数据reactive
let objs = reactive({
name: 'xxx'
})
// 不可改变的数据
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的使用:(进行对reactive 数据进行结构)必须是在reactive中使用
<template>
//在template 里面会有浅层解包
<h3 @click="h3click">{{name}}</h3>
</template>
setup(){
// 响应式数据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 里面会有浅层解包
<h3 @click="h3click">{{name}}</h3>
</template>
setup(){
// 响应式数据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)
// 第二中get 和set的用发
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自动收集响应式的依赖
<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, '数量')
// })
// 取消监听数据
// const stop = watchEffect(() => {
// console.log(fullName.value, '数量')
// })
// const h3click = () => {
// fullName.value++
// if (fullName.value >= 25) {
// // 取消监听
// stop()
// }
// }
// 取消副作用
watchEffect(
(clerVal) => {
console.log(fullName.value)
let timer = setTimeout(() => {
console.log('发送请求')
}, 1300)
clerVal(() => {
console.log('333')
clearTimeout(timer)
})
},
//调整执行顺序
{
// flush:"pre"//默认值
// flush:"post"//dome加载完后使用这个参数
}
)
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")
// 传日一个get函数
// watch(
// () => info.name,
// (newValue, oldValue) => {
// console.log(newValue + 'x', oldValue + 'j')
// }
// )
//1. 监听reactive响应对象和ref响应数据
// 监听reactive对象
watch(info, (newValue, oldValue) => {
console.log(newValue + 'x', oldValue + 'j')
})
// 将reactive响应对象转换成普通对象
// watch(
// () => {
// return {
// ...info
// }
// },
// (newValue, oldValue) => {
// console.log(newValue,'x', oldValue, 'j')
// }
// )
// 2.监听ref对象
const names = ref('zkl')
watch(names, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
//监听多条数据
watch([info, names], ([newValue, oldValue], [newname, oldname]) => {
console.log(newValue, oldValue, newname, oldname)
})
//深度监听和立即监听
//深度监听和立即监听，watch默认是深度监听的如果。如果使用结构赋值就不能深度监听
const info = reactive({
name: 'zkl',
firend: {
name: 'why'
}
})
watch(
() => ({ ...info }),
(newInfo, oldInfo) => {
console.log(newInfo, oldInfo)
},
{
deep: true, //深度监听
immediate: true //立即执行
}
)
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('页面发生改变的时候')
})
onUnmounted(() => {
console.log('销毁执行')
})
return {
getCount,
counter
}
}
}
</script>
12.provide和inject的使用（父和孙组件的时候使用）
//父组件
<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++
//孙组件不可以修改数据 readonly
provide('counterValue', readonly(counter))
return {
getCount,
counter
}
}
}
</script>
//孙组件
<template>
<div class="about">
<h1>{{ value.counter }}</h1>
<button @click="editClick">修改父组件数据</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'
//获取全局内容
const { appContext } = getCurrentInstance()
console.log(appContext.config.globalProperties.$name)
