**************** vue2 和 vue3 区别 ****************

v-if 与 v-for 的优先级对比

2.x 版本中  v-for > v-if
3.x 版本中  v-if  > v-for

v-for 中的 Ref 数组

vue2.x 会自动把ref填充内容
vue3.x 需要手动添加
	<ul>
      <li v-for='item in 5' :key='item' :ref="setItemRef">
        {{ item }}
      </li>
    </ul>

    methods:{
    	setItemRef(el){
    		this.arr.push( el );
    	}
	}

$children

vue2.x :  访问当前实例的子组件

vue3.x :  在 3.x 中，$children 已被移除，且不再支持。

	设置：<HelloWorld msg="Welcome" ref='hw'/>

	访问：this.$refs.hw

setup

4.1 是什么：组合式 API

4.2 来解决什么问题 : 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

4.3 响应区别：

 vue2.x : Object.defineProperty()

 vue3.x : Proxy 

 1. Object.defineProperty()存在的问题

 	1. 不能监听数组的变化
 	2. 必须遍历对象的每一个属性

 2. Proxy 不需要遍历

4.4 使用渲染函数:

 ref  :  就是定义数据的    		简单类型

 reactive  :  就是定义数据的  	复杂类型

4.5 setup语法糖插件： unplugin-auto-import

 解决场景 ： 在组件中开发无需每次都引入 import { ref }..

 1. 下载安装

 	npm i unplugin-auto-import -D

 2. 配置：vite.config.js中

 	import AutoImport from 'unplugin-auto-import/vite'
 	export default defineConfig({
 	  plugins: [
 	  	AutoImport({
 	  		imports:['vue','vue-router']//自动导入vue和vue-router相关函数
 	  	})
 	  ],
 	})

4.6 toRefs

 toRefs 函数 来完成数据的解构

4.7 computed

 1》 let obj = reactive({
 	  name:'张三',
 	  age:18,
 	  str:computed(()=>{
 	    return obj.name.slice(1,2)
 	  })
 	})

 2》	let msgChange = computed(()=>{
 	  return msg.value.slice(1,3);
 	})

 3》	let msgChange = computed({
 	  get(){
 	    return msg.value.slice(1,3);
 	  },
 	  set(){
 	    console.log('设置了')
 	  }
 	})

4.8 watch

 vue2.x :

 	watch:{
 		obj:{
 			handler(newVal , oldVal){
 				console.log( newVal , oldVal  )
 			},
 			immediate:true,
 			deep:true
 		}
 	}

 vue3.x :

 	1> 监听数据数据「初始化监听」

 		watch( msg , (newVal,oldVal)=>{
 			console.log(  newVal,oldVal )
 		},{
 			immediate:true
 		})

 	2> 监听多个数据「一起监听」

 		watch([msg,str],(newVal,oldVal)=>{
 			console.log(  newVal,oldVal )
 		},{
 			immediate:true
 		})

 	3> 监听“对象”中某个对象

 		watch( ()=>obj.arr , (newVal,oldVal)=>{
 			console.log( newVal,oldVal )
 		})

 	4> 立即执行监听函数

 		watchEffect(()=>{
 			console.log(  msg.value  )
 		})

 参考链接：https://v3.cn.vuejs.org/api/computed-watch-api.html#watcheffect

4.9 组件：父传子

 1. 父

 	<template>
 		<div>
 			<List :msg='msg'></List>
 		</div>
 	</template>

 	<script setup>
 	import List from '../components/List.vue'
 	let msg = ref('这是父传过去的数据');
 	</script>

 2. 子

 	<template>
 		<div> 
 			这是子组件 ==> {{ msg }}
 		</div>
 	</template>

 	<script setup>
 	defineProps({
 		msg:{
 			type:String,
 			default:'1111'
 		}
 	})
 	</script>

生命周期

5.1 选项式 API

 beforeCreate ...

5.2 setup 组合式API

 注意：没有beforeCreate和created
 其他生命周期要使用前面加"on" 例如：onMounted

参考链接：v3.cn.vuejs.org/guide/compo…

路由

useRoute ==> this.$route

useRouter ==> this.$router

回顾一下

vue-if和vue-for

vue2中v-for > v-if
vue3中vue-if > v-for

v-for中的ref

vue2.x会自动把ref填充内容
vue3.x需要手动添加

$children

vue2.x访问当前实例的子组件
vue3.x中$children property 已被移除，且不再支持

vue3实战【2】vue2和vue3一些对比

vue-if和vue-for

v-for中的ref

$children