vue3.0和vue2的区别

一、默认进行懒观察（lazy observation）
　　在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

二、更精准的变更通知。
　　举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

三、3.0 新加入了 TypeScript 以及 PWA 的支持

四、部分命令发生了变化：
　　1.下载安装 npm install -g vue@cli
　　2.删除了vue list
　　3.创建项目 vue create
　　4.启动项目 npm run serve

五、默认项目目录结构也发生了变化：
　　移除了配置文件目录，config 和 build 文件夹
　　移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
　　在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件

六、使用上的变化

1.Data

export default {data(){return{}}
},
///
取而代之是使用以下的方式去初始化数据:
<template><div class="hello">123</div><div>{{name.name}}</div>
</template>
import {reactive} from 'vue'
export default {setup(){const name = reactive({name:'hello 番茄'})return {name}}
}

tip:在新版当中setup等效于之前2.0版本当中得到beforeCreate,和created，它是在组件初始化的时候执行，甚至是比created更早执行。值得注意的是,在3.0当中如果你要想使用setup里的数据，你需要将用到值return出来，返回出来的值在模板当中都是可以使用的。
假设如果你不return出来，而直接去使用的话浏览器是会提醒你：

runtime-core.esm-bundler.js?5c40:37 [Vue warn]: Property "name" was accessed during render but is not defined on instance. at <Anonymous> at <Anonymous> (Root)

这个也是3.0当中需要注意的地方。细心的朋友应该已经发现，我在模板里放入2个子节点,其实这个在2.0里是不被允许的,这也是3.0的一项小的改变 reactive是3.0提供的一个数据响应的方式，它主要是对对象进行数据响应，接下来会介绍另一种数据响应的方式ref。

2.Method

  <div class="hello"><div>{{name.name}}</div><div>{{count}}</div><button @click="increamt">button</button></div></template><script>
import {reactive,ref} from 'vue'
export default {setup(){const name = reactive({name:'王'})const count=ref(0)const increamt=()=>{count.value++}return {name,count,increamt}}
}

在介绍Method的代码中，我引用了vue提供的ref新函数，它的作用是用来创建一个引用值，它主要是对String,Number,Boolean的数据响应作引用。也许有人会问，为什么不直接给count赋值，而是采用ref(0)这样的方式来创建呢，按我的理解就是，如果直接给count赋值就是等于把这个值直接抛出去了，就很难在找到它，而采用ref这种方法等于你在向外抛出去值的是同时，你还在它身上牵了一根绳子，方便去追踪它。
　　需要注意的时，在ref的函数中，如何你要去改变或者去引用它的值，ref的这个方法提供了一个value的返回值，对值进行操作。

3.LifeCycle(Hooks) 3.0当中的生命周期与2.0的生命周期出现了很大的不同：

　　beforeCreate -> 请使用 setup()

　　created -> 请使用 setup()

　　beforeMount -> onBeforeMount

　　mounted -> onMounted

　　beforeUpdate -> onBeforeUpdate

　　updated -> onUpdated

　　beforeDestroy -> onBeforeUnmount

　　destroyed -> onUnmounted

　　errorCaptured -> onErrorCaptured

如果要想在页面中使用生命周期函数的，根据以往2.0的操作是直接在页面中写入生命周期，而现在是需要去引用的，这就是为什么3.0能够将代码压缩到更低的原因。

import {reactive, ref, onMounted} from 'vue' export default { setup(){ const name = reactive({ name:'王' }) const count=ref(0) const increamt=()=>{ count.value++ } onMounted(()=>{ console.log('123') }) return {name,count,increamt} } 

4.computed

<template><div class="hello"> <div>{{name.name}}</div> <div>{{count}}</div> <div>计算属性{{computeCount}}</div> <button @click="increamt">button</button> </div> </template> <script> import {reactive, ref, onMounted,computed} from 'vue' export default { setup(){ const name = reactive({ name:'王' }) const count=ref(0) const increamt=()=>{ count.value++ } const computeCount=computed(()=>count.value*10)//使用computed记得需要引入，这也是刚接触3.0容易忘记的事情 onMounted(()=>{ console.log('123') }) return {name,count,increamt,computeCount} } } </script>

5.组件使用上的区别

在开始介绍3.0组件的用法之前，我们可以先回顾一下2.0使用组件的方式。在2.0当中，哪个页面需要使用组件就在哪个页面里引入该组件，同时在页面注册这个组件。在传递参数时，父组件传递参数给子组件，子组件就会接收父组件传递过来的参数。

举个栗子：

<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>子组件
<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return{}},method:{handleClick(){this.$emit('childclick','123')}}
}
</script>以上是最常见的父子组件之间的调用，但是在vue3.0中就存在差异。父组件：

<template><div class="hello"> <div>123</div> <NewComp :name="name" @childClick="parentClick"/> </div> </template> <script> import {reactive} from 'vue' import NewComp from './newComp.vue' export default { components:{ NewComp }, setup(){ const name=reactive({ name:'hello 番茄' }) const parentClick=(e)=>{ console.log(e) console.log('123') } return {name,parentClick} } } </script>子组件：

<template><div> <button @click="handleClick">组件</button> </div> </template> <script> export default { setup(props,{emit} ){ const handleClick=()=>{ emit('childClick','hello') } return { props, handleClick } } } </script>

　　通过上面的vue3.0父子组件之间的调用,我们不难发现,父组件当中在调用子组件时，基本与2.0相同，而在子组件当中,要想获取到父组件传递过来的参数,我们是直接在setup()中直接获取到props值和emit事件。这是因为setup为我们提供了props以及context这两个属性，而在context中又包含了emit等事件。
　　为什么不用this.$emit的方法来向外触发子组件事件，因为在3.0当中已经不在使用this关键词。

vue3.0和vue2的区别相关推荐

论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
vue3.0和vue2.0的比较
前言: 对vue3.0进行一次整理目录: 一.vue3.0的亮点 1.性能比vue2.x快1.2~2倍 2.支持按需编译,按需导入,体积比vue2.x更小 3.支持组合API,类似React Hoo ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
YDOOK: vue3.0: vue-cli4.5: stup()与各类钩子函数详细使用教程
YDOOK: vue3.0: vue-cli4.5: stup()与各类钩子函数详细使用教程 1. vue3.0 钩子函数与 vue2.0 钩子函数的区别与对比: vue3.0 钩子函数在 vue2 ...
vue3.0项目实战 - ElementUI框架版
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
vue3.0 php,使用Vue3.0收获的知识点（一）
前端发展百花放,一技未熟百技出. 茫然不知何下手,关注小编胜百书. 近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的 ...
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
Vue3核心概念、新特性及与Vue2的区别
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue中组件的应用(三)>,今天主要跟大家分享我整理的vue3的相关核心概念及其新特性,与Vue3的区别,主要包括 ...

vue3.0和vue2的区别

vue3.0和vue2的区别相关推荐

最新文章

热门文章