vue保姆级教程----深入了解 Vue3与Vue2的区别对比

```

在Vue2中编译时会生成如下render函数:

with(this){
  return _c('div',[_v(_s(message))]) 
}

而在Vue3中,同样的模板会编译成:

return {
  render() {
    return _c('div',{
      message: ctx.message
    })
  }  
}

这样就避免了无谓的代理操

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

作,提升了性能。

2、代理:Vue3中的代理可以自动批量代理对象中的所有属性,无需一个一个声明。

3、模板编译优化:引入块级作用域,模板中的变量不会互相污染。

Vue3中的模板编译支持块级作用域,这样模板中的变量就不会互相污染了。

例如在Vue2中,父组件和子组件中使用相同的变量名会互相影响:

// 父组件
<template>
  <div>{{message}}</div>
  <child-component></child-component>
</template>

// 子组件 
<template>
  <div>{{message}}</div>  
</template>

但在Vue3中,引入了块级作用域,不存在这个问题:

// 父组件
<template>
  <div>{{message}}</div>
  <child-component></child-component> 
</template>

// 子组件
<template>
  <div>{{message}}</div> // 不受父组件的影响
</template>

4、源码采用TS重写,运行更高效。Vue3使用TypeScript重写源码,类型检查更严谨,编码时也能获得更好的提示。同时TS运行效率也比纯JavaScript要高,对性能有提升作用。

二、组合式API

Vue3提供了setup方法,我们可以更灵活地组合逻辑代码,不再受以前data、methods等选项的限制。

// Vue2
export default {
  data() {
    return {
      message: 'Hello Vue2'
    }
  },
  methods: {
    onClick() {
      console.log(this.message)
    }
  }
}

// Vue3
import {ref, onMounted} from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue3')
    
    onMounted(() => {
      console.log(message.value)
    })
    
    return {
      message
    }
  }
}

三、新增特性

1. Fragment:文档碎片,不再要求组件根节点是单个元素。

<!-- Vue2需使用一个根节点 -->
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

<!-- Vue3可以不使用根节点 -->
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

2. Teleport:瞬移组件根节点到指定DOM位置。

<teleport to="#modal">
  <div>弹窗内容</div>
</teleport>

3. Suspense:支持异步组件加载时显示加载界面。

<suspense>
  <async-component></async-component>
  <template #fallback>
    加载中...
  </template>
</suspense>

四、移除过滤器

过滤器已不被官方推荐,Vue3中移除了过滤器这个概念。

Vue2中我们可以通过过滤器改变数据的展示:

<!-- 在双括号插值中 -->
<div>{{ message | capitalize }}</div> 

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 定义过滤器
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

但在Vue3中,过滤器被完全移除了。官方推荐通过方法调用或计算属性去实现数据变换。

五、移除事件API

Vue3移除了$on、$off、$once方法,改为使用emits属性。

Vue2中我们通过$on,$off,$once管理事件:

// 监听事件
this.$on('test', handle)

// 取消监听
this.$off('test', handle)

// 监听一次
this.$once('test', handle)

Vue3中推荐使用emits属性替代这些事件API:

emits: ['test']

六、新增Composition API

Vue3全新提供了一套更适合功能开发的Composition API 如ref、reactive等,我们可以更灵活地组织组件的逻辑。

例如ref实现响应式数据:

import {ref} from 'vue'

const counter = ref(0)

reactive转换对象为响应式:

import {reactive} from 'vue'

const state = reactive({
  count: 0
})

computed实现计算属性等,这套API给了我们更多可能性。

七、tree-shaking支持

Vue3支持tree-shaking,也就是打包时只打包实际用到的代码,减少了打包产物体积。

八、调整部分API命名

一些API做了重命名,语义更加明确,例如:

• $listeners 改为 emits
• $attrs 改为 expose

九、新的全局API

Vue3提供了一些新的全局API:

• createApp:用于创建Vue实例

import {createApp} from 'vue'

const app = createApp(App)

• defineComponent: 定义组件

import {defineComponent} from 'vue'



### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。



![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)