Vue2和Vue3的区别——实例创建、响应式数据代理、v-for和v-if优先级、生命周期

一、Vue3实例创建

Vue2创建应用使用new Vue()构造函数，而Vue3通过 creatApp 函数创建一个新的应用实例，并且实例和模板绑定需要使用mount方法。


"app">
 
//创建Vue应用
let app = Vue.createApp({
 
})
// 将应用与模板绑定
app.mount('#app');

二、响应式数据代理

vue3数据模型会经过一个proxy对象代理，vue2数据模型使用es5的Object.defineproperty()实现代理。

我们需要注意以下情况：


let app = Vue.createApp({
  data(){
    return {
      obj: {name:'zhangsan'}
    }
  },
  created(){
    const newObj = {};
    this.obj = newObj;
    console.log(newObj === this.obj); //如果是在vue2中，结果返回true，但是在vue3中，结果是false
    console.log(newObj); //{}
    console.log(this.obj); //Proxy {}
  }
})

当你在赋值后再访问 this.obj，此值已经是原来的 newObj 的一个响应式代理。与 Vue 2 不同的是，这里原始的 newObj 不会变为响应式：请确保始终通过 this 来访问响应式状态。

三、v-if 和 v-for

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

在vue2中：v-for 优先级比 v-if 优先级高
在vue3中：v-if 优先级比 v-for优先级高


  <div id="app">
    <div v-for="item in arr" v-if="item">{{item}}div>
  div>
  <script>
    let app = Vue.createApp({
      data(){
        return {
          arr: [1, 2, 3, 4]
        }
      },
      
    })
    // 将应用与模板绑定
	app.mount('#app');
  script>

上述代码在vue3中无法将数据渲染出来，但是在vue2中可以渲染出来。

四、生命周期

Vue3将Vue2的beforDestroy和destroyed生命周期改成了：

beforeUnmount：解绑前

unmounted：解绑后（可以使用unmount()方法手动解绑）

并且Vue3新增了一个生命周期setup：组合式API

组合式API

组合式API将Vue2中需要在data、methods、computed、created等选项中实现的功能合并到了一起，所以使用组合式API不需要在不同的选项做不同得操作。

ref()用来存放响应式变量，ref()将变量包裹到对象的value值身上。

例子：


html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js">script>
head>
 
<body>
  <div id="app">
    
    
    <div v-for="item in swipeData" :key="item.id">
      <div>{{item.introduce}}div>
    div>
  div>
  <script>
    let ref = Vue.ref;
    let onMounted = Vue.onMounted;
    let app = Vue.createApp({
      setup() {
        // 尽可能避免使用this
        // console.log(this,'this指向'); //window
        // 初始化响应式数据
        let swipeData = ref([]);
        // 封装异步函数
        let loadSwipeData = async () => {
          let res = await axios.get('url地址')
          // console.log(res,'获取响应');
          // 在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value
          swipeData.value = res.data.data;
        }
        // 在mounted生命周期执行 loadSwipeData()
        onMounted(loadSwipeData());
        // 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
        return {
          swipeData
        }
      }
    });
    // 将应用与模板绑定
    app.mount('#app');
  script>
body>
 
html>

如果使用vue2实现上述代码：


html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10">script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js">script>
head>
<body>
	<div id="app">
    <div v-for="item in swipeData" :key="item.id">
      <div>{{item.introduce}}div>
    div>
  div>
	<script>
		new Vue({
			el:"#app",
			data:{
                //初始化响应式数据
				swipeData:[]
			},
			methods:{
				// 封装异步函数
                async loadSwipeData() {
                    let res = await axios.get('url地址')
                    // console.log(res,'获取响应');
                    this.swipeData = res.data.data;
                }
			},
			mounted(){
				this.loadSwipeData();
			}
		})
	script>
body>
html>

相关阅读:
NOSQL Redis 数据持久化 RDB、AOF（二）恢复
 UI设计师的工作职责优漫动游
 c++day3
【Linux】第五站：Linux权限
 我的家乡潍坊HTML静态网页学生个人网页设计作品学生家乡网页模板简单个人主页成品
 LeetCode 264：丑数
 无证书线性同态聚合签名方案研究
 Abnova丨培养细胞总 RNA 纯化试剂盒中英文说明书
 C++Prime Plus(5)
集美大学 - 2840 - 实验10和11 - 编程题
原文地址：https://blog.csdn.net/lq313131/article/details/127095219