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

叶子yes

已于 2022-10-02 11:11:52 修改

阅读量2.1k

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-09-28 20:53:31 首次发布

本文链接：https://blog.csdn.net/lq313131/article/details/127095219

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、Vue3实例创建

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

<div id="app"></div>

//创建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优先级高

<body>
  <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>
</body>

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

四、生命周期

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

beforeUnmount：解绑前

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

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

组合式API

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

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

例子：

<!DOCTYPE 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>Document</title>
  <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">
    <!-- 要求请求轮播图接口 拿数据 将数据展示到模板中 -->
    <!-- v2:methods:{封装异步 获取后台响应设置给data中变量} created(发起异步)  -->
    <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实现上述代码：

<!DOCTYPE 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>Document</title>
	<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>