当前位置: 首页 > news >正文

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

目录

一、Vue3实例创建

二、响应式数据代理

三、v-if 和 v-for

四、生命周期

组合式API


一、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-ifv-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('http://43.142.190.80:8888/index/carousel/findAll')
          // 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('http://43.142.190.80:8888/index/carousel/findAll')
                    // console.log(res,'获取响应');
                    this.swipeData = res.data.data;
                }
			},
			mounted(){
				this.loadSwipeData();
			}
		})
	</script>
</body>
</html>

相关文章:

  • 跑步装备推荐:2022年跑步装备选购清单
  • 多线程(进阶)
  • 如何学习HTML5 需要掌握哪些技能
  • Dinky,让 Flink SQL 纵享丝滑
  • Docker | docker容器导出以及常见问题的处理
  • 【云原生之Docker实战】使用Docker部署Pichome个人相册系统
  • JavaScript 33. Promise
  • 探究MYSQL之索引
  • 创邻科技入选Gartner全球《图数据库管理系统市场指南》代表厂商
  • WEB自动化测试(5)—— Cypress-元素交互
  • 怎么入门网络安全,学这两类证书就够了NISP或CISP
  • iOS 16 SwiftUI 4.0 列表(List)项分隔线变短的原因及解决
  • MySQL-存储过程-函数-触发器-游标
  • 【XGBoost】第 5 章:XGBoost 揭幕
  • Linux环境搭建与登陆
  • 智能驾驶 车牌检测和识别(一)《CCPD车牌数据集》
  • 【c语言进阶】动态内存管理知识大全(下)
  • 前端实现水印的两种方式(DOM和Canvas)
  • Linux——进程
  • 【看表情包学Linux】冯诺依曼架构 | 理解操作系统 | 基于 Pintos 实现新的用户级程序的系统调用
  • 单链表——简单的增删查改
  • 电子技术——MOS放大器基础
  • 嵌入式 学习
  • 【Linux】vim编辑器的使用
  • 强化学习笔记:基于策略的学习之策略迭代(python实现)
  • U盘启动工具
  • 总结:0 bug事件、交大ACM夺冠
  • ASP脚本语言jscript基本结构与语法
  • 2、学习cisco路由各个部件的关系
  • idea 导入web 项目
  • 路由选择协议介绍
  • python 数学运算符
  • 系统关键检查
  • IDEA输入汉字出现乱码
  • Scala刮:使用Intellij IDEA写hello world