总结vue2.0与vue3.0的区别,让你快速上手

1:vue3.0和2.0的区别

2.0数据双向绑定方面

Vue2.0使用Object.defineProperty

原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知

// 数据
let data = {
	title: '',
	// 备份数据
	_data: {}
}
// 定义特性
Object.defineProperty(data, 'title', {
	// 定义特性属性或者特性方法
	// 取值方法
	get() {
		// console.log('get')
		// 注意:不能通过自身属性取值
		// return this.title
		// 返回备份的数据
		return this._data.title;
	},
	// 赋值方法
	set(value) {
		// this指向对象
		// 注意:不能为自身属性赋值
		// this.title = value
		// 我们可以向备份数据中存储
		this._data.title = value;
		// console.log('set')
		// 更新视图
		updateView(this._data)
	}
})
// 视图模板
let tpl = document.getElementById('app').innerHTML
// 实现更新视图的方法
function updateView(data) {
	// 处理模板
	let html = tpl.replace(/{
  {(w+)}}/g, (match, $1) => {
		// 从data中获取数据
		return data[$1] || ''
	})
	// 更新视图
	document.getElementById('app').innerHTML = html;
}

Vue3.0数据绑定

使用ES6的新特性porxy

原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
      <title>vue3.0数据双向绑定</title>
  </head>
  <body>
      <div>
         <input type="text" id="input">
         <span id="text"></span>
     </div>
 </body>
 </html>
 <script>
     var obj = {};
     var obj1 = new Proxy(obj, {
         // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
         get: function (target, key, receive) {
             // 返回该属性值
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             // 执行赋值操作
             target[key] = newVal;
             document.getElementById('text').innerHTML = target[key];
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });
 </script>

总结:

Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象,并返回一个新对象

2: 创建项目

未创建过vue脚手架得同学 或者从线上拉项目下来得同学 可以首先 查一下 当前版本

1:查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli4

vue --version

2:如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装
安装3.0版本: 目前新项目搭建脚手架默认安装得是3.0版本

npm install -g vue-cli

如果是旧项目2.0版本到3.0切换得同学,即卸载当前版本,安装另外的版本
从2.0升级到3.0:

npm uninstall -g vue-cli

  • 7
    点赞
  • 52
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3.0是Vue.js框架的最新版本,与Vue 2.0相比有一些重要的改进和变化。要将Vue 2.0项目迁移到Vue 3.0,需要进行以下步骤: 1. 更新依赖项:首先,需要将项目中的Vue.js依赖项更新为最新的3.0版本。这包括Vue核心库以及其他可能使用的Vue插件或扩展。 2. 代码适配:Vue 3.0引入了一些新的语法和API,与Vue 2.0有一些不兼容的变化。因此,需要对项目中的代码进行适配。例如,Vue 3.0使用了新的Composition API,可以取代2.0版本中的Options API,需要对组件进行适配以使用新的API。另外,一些特性,如slot和transition,也有一些变化,需要根据Vue 3.0的文档进行修改。 3. 构建工具更新:Vue 3.0对应的构建工具也有所改变。如果你的项目使用了Vue CLI或其他构建工具,需要将它们更新为最新的版本以支持Vue 3.0。 4. 运行测试:完成代码适配后,需要进行测试以确保项目在Vue 3.0下能够正常运行。可以使用Vue官方提供的测试工具或其他适用的测试框架进行测试。 5. 性能优化:Vue 3.0在性能方面进行了一些改进,因此可以考虑对项目进行性能优化。这包括使用新的编译优化、按需引入和缓存等。 总之,迁移到Vue 3.0需要更新依赖项、适配代码、更新构建工具、进行测试和性能优化等步骤。通过认真阅读Vue 3.0的文档和指南,并根据项目的具体情况进行相应的修改和调整,可以顺利完成迁移过程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值