Home.vue
<template>
<div class="home">
<div>
{{ fone }}
</div>
<div>
{{ ftwo }}
</div>
<div>
{{ ffour }}
</div>
<div>
{{ ffive }}
</div>
<HelloWorld @toFatherThing="getChildThing" msg="Welcome to Your Vue.js + TypeScript App" v-model="fsix" />
<div>
{{ fsix }}
</div>
<div>
{{ fseven }}
</div>
<div>
<ul>
<li v-for="item in feight">{{ item.name }}</li>
</ul>
</div>
<div>{{ ften }}</div>
<div>{{ aOne }}</div>
<div>{{ aTwo }}</div>
<!-- 成功渲染render子组件 -->
<MyRender msg="msg" msg2="msg2"/>
</div>
</template>
<script lang="ts" setup>
import HelloWorld from "../components/HelloWorld"
import MyRender from "../components/myRender"
import { onUpdated, onMounted, onBeforeUnmount, onUnmounted, onBeforeMount, computed, watchEffect, watch, ref, unref, reactive, shallowRef, shallowReactive, defineComponent, defineOptions, toRefs } from "vue"
import {myAbcHook} from "./homeHook"
//定义组件的一些配置
defineOptions({
name: 'Home'
})
//ref 定义基本数据类型
const foneRef = ref('slkfjsklfdjskfd')
const fone = unref(foneRef) //获取ref的value
const ftwo = reactive({
a: {
b: {
c: 'sdlfjslfkjsdf'
}
},
a2: "sldfkjsklfjslkfj"
})
setTimeout(() => {
ftwo.a.b.c = "3424234242342423"
// ftwo.a2="slkfjlskdjflksfd"
}, 1000);
// watchEffect(()=>{
// console.log(ftwo.a2,"ftwo-effect")
// })
// watchEffect(()=>{
// console.log(ftwo,"ftwo-ccc-effect")
// })
watchEffect(() => {
console.log(ftwo.a.b.c, "ftwo-abc-effect") //可以监听到，说明watchEffect实现了深度监听
})
let fthree = toRefs(ftwo)
console.log(ftwo, "ftwo") //proxy 代理对象
console.log(fthree, "fthree") //返回一个对象，使用对象属性都通过ref实现监听
const ffourSref = shallowRef({
a: {
b: {
c: 'sdkflsjdflkjsfd'
}
},
a2: "before"
})
let ffour = unref(ffourSref)
setTimeout(() => {
ffour.a.b.c = "changed" //页面渲染没变，说明shallowRef不是深度监听
ffour.a2 = "now" //也无法改变说明shallowRef只能监听基本的数据类型
}, 1000)
let ffive = shallowReactive({ //浅监听，只对第一层的引用类型进行监听
a: {
b: {
c: "sdfkjsldsfjsdf"
}
},
a2: "slkfjslksdf"
})
setTimeout(() => {
ffive.a.b.c = "cccccc"//无法改变，说明shallowReactive 只能监听到直接的引用类型第一层
// ffive.a2="now"
}, 1000)
let fsix = ref<string>()
function getChildThing(val) {
console.log(val, "val") //获取子组件事件传过来的值
}
let feight = reactive([{
id: 0,
name: 'sfksjdf'
}, {
id: 1,
name: 'neuvodsksf'
}, {
id: 2,
b: {
c: {
d: 2342342
}
}
}])
setTimeout(() => {
// feight[1].name="now"
feight[2].b.c.d = 4056805468049
}, 1000)
watchEffect(() => {
console.log(feight, "feight_sdfklsjdflsf") //上面的更改也监听到了，说明watchEffect 对数组也是深度监听
})
watch(feight, () => {
console.log(feight, "feight")
})
let wone = ref('ksjldfkjsfd')
setTimeout(() => {
wone.value = "34234242"
}, 1000)
watch(wone, (value, old) => {
console.log(value, "wone") //直接获取到值
})
watchEffect(() => {
console.log(wone, "effect")
console.log(wone.value, "effect") //这样才能打印出来，这样才能监听到
})
let cone = computed(() => {
return wone.value
})
console.log(cone, "cone")
console.log(cone.value, "cone_value") //类似ref需要通过value访问
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
console.log('onMounted')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount')
})
onUnmounted(() => {
console.log('onUnmounted')
})
let ften = ref(11111)
onUpdated(() => {
console.log("onUpdated") //在数据都更新到dom之后才执行,说明是异步的任务
})
setTimeout(() => {
ften.value = 2222 //这里修改后，dom执行完成后会再次触发onUpdated
}, 3000)
//测试自定义hooks使用,自定义hook类似utils功能，都是hook可以通用组件的钩子和生命周期等
let {aOne,aTwo}=myAbcHook(9999)
</script>
<style lang="scss">
.home {
width: 50vw;
position: relative;
margin: 0 auto;
}
</style>
子组件Helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div>
<input type="text" v-model="model">
</div>
<div>
<button @click="fn1">child btn</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, shallowRef, shallowReactive, defineComponent, defineOptions, toRefs, defineEmits, defineModel } from "vue"
defineProps<{
msg: string,
value: string
}>()
const model = defineModel() //vue3 vmodel实现方式
const emit = defineEmits(['toFatherThing']) //emit 实现
let val = 0
function fn1() {
emit('toFatherThing', val++)
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
子组件myRender.tsx 写法尝试
import { h, defineComponent } from "vue";
export default defineComponent({
name: "MyRender",
props: {
msg: {
type: String,
default: "这是子组件render",
},
},
setup(props, context) {
const { msg } = props;
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs);
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots);
// 触发事件（函数，等价于 $emit）
console.log(context.emit);
// 暴露公共属性（函数）
console.log(context.expose);
console.log(context, "context");
console.log(context.attrs, "attrs"); //可以获取到组件标签的属性值，但是如果被props读取后，这个属性值就不会在attrs里面了，attrs是一个对象
console.log(context.attrs.msg2, "msg2"); //可以打印到msg2这个属性值
return {
msg,
};
},
render() {
console.log(this.$props.msg, "props_msg"); //这里可以直接通过this访问到props slots
return [h("div", this.msg)];
},
});
自定义hook尝试 homeHook.ts
import { reactive, ref, onMounted } from "vue"
import delay from "lodash/delay"
export function myAbcHook(val: number) {
type aTwoType = {
a: string,
b: unknown
}
let aTwo = reactive<aTwoType>({
a: 'sfsdfs',
b: 'sdfsdfsf' as string
})
let aOne = ref(val)
onMounted(() => {
delay(() => {
console.log("delay")
aOne.value = 366666 //成功改变数据到视图
console.log(aOne.value, "aone")
aTwo.a = "修改reactive 对象在hooks中"
}, 1000)
})
//要返回整个ref才能是响应式，返回.value 只是读取ref的值而已
return {
aTwo,
aOne
}
}
前端工程师、程序员
