1. 使用 reactive 绑定数据
<template>
<div>
<h1>使用 reactive 绑定数据</h1>
<p>{{state.msg}}</p>
<p>{{info}}</p>
<p>
<button @click="changeMsg">changeMsg</button>
</p>
</div>
</template>
<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
name: 'test1',
setup() {
const state = reactive({
msg: '时光'
})
console.log(state);
let info = 'hello';
const changeMsg = () => {
state.msg = '时光,你好'
info = 'hello,你好'
}
return {
state,
info,
changeMsg
}
}
})
</script>
2. setup()函数 完成父子通信
1. setup(props)第一个参数props
案例1:props作为setup的第一个参数
<template>
<div class="home">
<About :name="sendData"/>
</div>
</template>
<script>
import {ref} from 'vue';
import About from './About'
export default{
components:{
About,
},
setup(){
const sendData = ref('这世界很酷');
return {
sendData
}
}
}
</script>
<template>
<div class="about">
{{propContent}}
</div>
</template>
<script>
import {watchEffect} from 'vue';
export default{
props:{
name:String
},
setup(props){
let propContent= props.name;
return {
propContent
}
}
}
</script>
2. setup(props,context)第二个参数Context上下文对象
<template>
<div class="home">
<About :name="sendData.val" @name-changed=changeName>
世界变化不停,人潮川流不息
</About>
</div>
</template>
<script>
import {reactive} from 'vue';
import About from './About';
export default{
components:{
About,
},
setup(){
const sendData = reactive({
val:'sendData'
})
setTimeout(()=>{
sendData.val+=1;
},1000)
function changeName(msg){
console.log(`子组件传递了${msg}过来`)
}
return {
sendData,
changeName,
}
}
}
</script>
<template>
<div class="about">
<button @click="fn">子改父</button>
</div>
</template>
<script>
import {watch} from 'vue';
export default {
props:{
name:String
},
setup(props, context) {
console.log(context,"上下文");
let num=100;
let fn=()=>{
content.emit('name-changed',num)
}
return {
fn
}
);
},
}
</script>
3. 使用 ref、toRefs 绑定数据
<template>
<div>
<p>使用v-model双向数据绑定的数据内容是:{{ msg }}</p>
<p>
<!-- 自己实现双向数据绑定,监听input事件,动态修改nmsg的值 -->
<input type="text" ref="myInput" @input="input" :value="nmsg" />
</p>
<p>使用@input事件动态实现双向数据绑定的数据内容是:{{ nmsg }}</p>
<p>
<!-- 使用ref方法动态定义并双向绑定hmsg -->
<input type="text" v-model="hmsg" @input="hmagInpu" />
</p>
<p>使用ref方法动态定义并双向数据绑定的数据hmsg是:{{ hmsg }}</p>
<p>toRefs 来实现在模板中不需要追加 state 调用数据:{{ msg }}</p>
</div>
</template>
<script>
import {
defineComponent,
reactive,
getCurrentInstance,
toRefs,
ref,
computed,
} from "vue";
export default defineComponent({
setup() {
const state = reactive({
msg: "",
nmsg: "",
cmsg: computed(() => {
return state.msg.length;
}),
});
const { ctx } = getCurrentInstance();
const input = () => {
console.log(ctx.$refs.myInput.value);
state.nmsg = ctx.$refs.myInput.value;
};
const hmsg = ref("abc");
const hmagInpu = () => {
console.log("获取到的hmsg值是:" + hmsg.value);
};
return {
...toRefs(state),
hmsg,
input,
hmagInpu,
};
},
});
</script>
4. watch、watchEffect 数据监听
<template>
<div>
<h1>watch、watchEffect 数据监听</h1>
<p>{{ msg }}</p>
<p>{{ msg2 }}</p>
<p>{{ info }}</p>
<p>
<button @click="changeMsg">changeMsg</button>
</p>
<p>
<button @click="changeMsg2">changeMsg2</button>
</p>
</div>
</template>
<script>
import { defineComponent, reactive, watchEffect, watch, toRefs } from "vue";
export default defineComponent({
name: "watch",
setup() {
const state = reactive({
msg: "时光",
msg2: "kity",
changeMsg2: () => {
state.msg2 = "kity,你好";
},
});
const changeMsg = () => {
state.msg = "时光,改变";
info = "hello,改变";
};
let info = "hello";
watch(state, () => {
console.log("观察整个state中属性变化", state.msg);
});
watch(
() => state.msg,
(newVal, oldVal) => {
console.log("01-msg的新值是:" + newVal + "-------旧值是:" + oldVal);
}
);
watch([() => state.msg, () => state.msg2], (newVal, oldVal) => {
console.log("02-msg的新值是:" + newVal + "-------旧值是:" + oldVal);
});
watchEffect(() => {
console.log("03-watchEffect监听 state 中数据变化:", state.msg);
});
return {
...toRefs(state),
info,
changeMsg,
};
},
});
</script>
5. 生命周期
setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件,切换到 B 组件,A 组件消失时执行。
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated