1.响应式原理
vue2的响应式原理是利用了es5的一个API，Object.definePropetry() 对数据进行劫持结合发布订阅模式的方式来实现的。
vue3中使用了es6的proxyAPI对数据代理,通过reactive()函数对每个对象都包一层Proxy，通过Proxy监听属性的变化，从而实现对数据的监控
这里是相比于vue2版本,使用proxy的优势如下
1.definePropetry只能监听某个属性,不能对全对象监听可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
2.可以监听数组，不用再去单独对数组做特异性操作，通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。(vue3.x可以检测到数组内部的变化)
2.生命周期
1.vue2有beforeCreate和created，但vue3没有这两个生命周期，用setup代替了beforeCreate和created这两个生命周期
2.vue3的生命周期，前面都要加一个on
3.销毁期的生命周期也发生了改变,vue2是beforeDestroy和destroyed，vue3换成了onBeforeUnmount和onUnmounted
3.组件传值
父子传值
props取值有两种方式，数组形式和对象形式,数组形式就是正常取值，对象形式可以设置值的类型和默认值
vue2
<!-- 父组件传值 -->
<template>
<div class="home">
<one-view :list="list">
</one-view>
</div>
</template>
<script>
export default {
name: 'HomeView',
components: {
oneView: () => import('@/components/OneView.vue')
},
data() {
return {
list: []
}
}
}
</script>
子组件通过props传递父组件过来的数据
<!-- 子组件接收 -->
<template>
<div>
{{data}}
</div>
</template>
<script>
export default{
props: ['data'],
created(){
console.log('props',this.data)
},
}
</script>
vue3 父组件直接引入子组件就可以使用，不需要通过components注册。
<!-- 父组件 -->
<template>
<one-view :name='name'></one-view>
</template>
<script setup>
import OneView from '@/components/OneView.vue'
import { ref } from 'vue'
let name = ref('依古比古')
</script>
子组件需要引入defineProps,在srcipt标签上使用setup语法糖
<!-- 子组件 -->
<template>
<div>
{{name}}
</div>
</template>
<script setup>
import { defineProps} from 'vue'
const props = defineProps({
name: { type: String, default:'' },
})
</script>
子父传值
vue2 在子组件通过this.$emit(要派发的事件,要传递的数据)
<!-- 子组件 -->
<template>
<div @click='setName'>
{{name}}
</div>
</template>
<script >
export default {
props:['name'],
methods: {
setName(){
this.$emit('setNameFn',123)
}
}
}
</script>
父组件通过@要派发的事件='方法',参数val就是子组件传递的值(123)
<!-- 父组件 -->
<template>
<one-view @setNameFn='setNameFn'>
{{name}}
</one-view>
</template>
<script>
import OneView from '@/components/OneView.vue'
export default {
data(){
return {
name:"哈哈哈"
}
},
methods: {
setNameFn(val){
this.$emit('setNameFn',val)
}
}
}
</script>
vue3
import { defineEmits } from 'vue'
const emit = defineEmits(['setData'])
const showFn = () => {
emit('setData', 123)
}
4.根节点
vue2只支持一个根节点，如果写多个根节点会报错
<template>
<div>
<div>
vue2
</div>
</div>
</template>
vue3支持多个根节点 因为vue3有一个虚拟根节点的概念，也就是不管写多少个根节点，框架会在最外层加一个虚拟根节点，把我们写的根节点套进去
<template>
<div class="item">
vue3
</div>
<div>
vue3
</div>
</template>
5.实例化
vue2.x中new出的实例对象，所有东西都在vue对象上，这样其实无论你用到还是没用到，都会跑一遍，这样不仅提高了性能消耗，也无疑增加了用户加载时间 而vue3中可以用ES module imports按需引入，如:keep-alive内置组件，v-model指令等等不仅开发起来更便捷，减少了内存消耗，也同时减少了用户加载时间，优化用户体验
6.this指向
vue3没有this指向，像vue2里面的data属性、methods方法、computed计算属性等等，我们都可以用this指向拿到，但是vue3不可以，需要我们自己导入到页面上去使用。ref、reactive、useRouter、vueStore(vuex)
