vue2中data函数中的数据都具有响应式，页面会随着data中的数据变化而变化；而vue3不存在data函数，所以Vue3引入了ref和reactive函数来将使得变量成为响应式的数据

2.1、vue2

<script>

export default {

data(){

return {

msg:'hello world'

obj:{

name:'juejin',

age:3

}

}

},

methods:{

changeData (){

this.msg = 'hello juejin',

this.obj.name = 'hello world'

}

}

}

</script>

2.2、vue3

<script>

import { ref,reactive,defineComponent } from "vue";

export default defineComponent({

setup() {

let msg = ref('hello world')

let obj = reactive({

name:'juejin',

age:3

})

const changeData = () => {

msg.value = 'hello juejin'

obj.name = 'hello world'

}

return {

msg,

obj,

changeData

};

},

});

</script>

2.3、vue3 setup语法糖

<script setup>

import { ref,reactive } from "vue";

let msg = ref('hello world')

let obj = reactive({

name:'juejin',

age:3

})

const changeData = () => {

msg.value = 'hello juejin'

obj.name = 'hello world'

}

</script>

总结：

使用ref的时候在js中取值的时候需要加上.value。

reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

3、生命周期

Vue2和Vue3生命周期的差异

4、使用mounted做对比

4.1、vue2

<script>

export default {

mounted(){

console.log('挂载完成')

}

}

</script>

4.2、vue3

<script>

import { onMounted,defineComponent } from "vue";

export default defineComponent({

setup() {

onMounted(()=>{

console.log('挂载完成')

})

return {

onMounted

};

},

});

</script>

4.3、vue3 setup语法糖

<script setup>

import { onMounted } from "vue";

onMounted(()=>{

console.log('挂载完成')

})

</script>

总结：Vue3中的生命周期相对于Vue2做了一些调整，命名上发生了一些变化并且移除了beforeCreate和created，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们。

5、watch和computed

5.1、vue2

<template>

<div>{ { addSum }}</div>

</template>

<script>

export default {

data() {

return {

a: 1,

b: 2

}

},

computed: {

addSum() {

return this.a + this.b

}

},

watch:{

a(newValue, oldValue){

console.log(`a从${ oldValue}变成了${ newValue}`)

}

}

}

</script>

5.2、vue3

<template>

<div>{ { addSum}}</div>

</template>

<script>

import { computed, ref, watch, defineComponent } from "vue";

export default defineComponent({

setup() {

const a = ref(1)

const b = ref(2)

let addSum = computed(() => {

return a.value+b.value

})

watch(a, (newValue, oldValue) => {

console.log(`a从${ oldValue}变成了${ newValue}`)

})

return {

addSum

};

},

});

</script>

5.3、vue3 setup语法糖

<template>

<div>{ { addSum }}</div>

</template>

<script setup>

import { computed, ref, watch } from "vue";

const a = ref(1)

const b = ref(2)

let addSum = computed(() => {

return a.value + b.value

})

watch(a, (newValue, oldValue) => {

console.log(`a从${ oldValue}变成了${ newValue}`)

})

</script>

Vue3中除了watch，还引入了副作用监听函数watchEffect；

watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

例如：

<template>

<div>{ { watchTarget }}</div>

</template>

<script setup>

import { watchEffect,ref } from "vue";

const watchTarget = ref(0)

watchEffect(()=>{

console.log(watchTarget.value)

})

setInterval(()=>{

watchTarget.value++

},1000)

</script>

首先刚进入页面就会执行watchEffect中的函数打印出:0,随着定时器的运行，watchEffect监听到依赖数据的变化回调函数每隔一秒就会执行一次

总结：

computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行，即（{ immediate: true }）

6、组件通信

7、props传值

props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式

7.1、vue2

//父组件

<template>

<div>

<Child :msg="parentMsg" />code>

</div>

</template>

<script>

import Child from './Child'

export default { -- -->

components:{

Child

},

data() {

return {

parentMsg: '父组件信息'

}

}

}

</script>

//子组件

<template>

<div>

{ { msg}}

</div>

</template>

<script>

export default {

props:['msg']

}

</script>

7.2、vue3