Vue3又要开始学新的语法了，简单回顾对比下吧

目录结构

vue1.X目录结构没有明确的定义

vue2.x和vue3.x目录结构没有什么变化，比1.0更丰富清晰，只是一些使用方法变了，而且默认是安装了TypeScript。

组件模板不再支持片段代码

vue 1.0是

<template>
  <h3>我是组件</h3><strong>我是加粗标签</strong>
</template>

vue 2.0 vue3.0是:必须有根元素,包裹住所有的代码

<template id="aaa">
  <div>
    <h3>我是组件</h3>
      <strong>我是加粗标签</strong>
   </div>
</template

组件定义

VUE1.0定义组件的方式有:

Vue.extend            这种方式，在2.0里面有，但是有一些改动

Vue.component(组件名称,{    在2.0继续能用
    data(){}
    methods:{}
    template:
});

VUE2.0定义组件的方式则更为简单:

var Home={
        template:''        ->   相当于Vue.extend()
};

对比局部注册：
vue 1.0

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> will only be available in Parent's template
    'my-component': Child
  }
})

vue 2.0

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。

vue3.0

<template> <v-fragment> <div>Hello</div> <div>World</div> </v-fragment> </template>

生命周期的变化

vue1.0的生命周期为

init                     ->初始化
created                  ->创建
beforeCompile            ->编译之前
compiled                 ->编译完成
ready        √           -> mounted
beforeDestroy            ->销毁之前
destroyed                ->已经销毁

vue2.0的生命周期为(标*的为经常用的)

beforeCreate    组件实例刚刚被创建,属性都没有
created         实例已经创建完成，属性已经绑定
beforeMount     模板编译之前
mounted         模板编译之后，代替之前ready  *
beforeUpdate    组件更新之前
updated         组件更新完毕    *
beforeDestroy   组件销毁前
destroyed       组件销毁后

vue3.0的生命周期

在项目中具体的使用方法：

• setup

setup有两个参数 props 和 context

• props：接受父组件传的值
• context：vue3.x里面没有this，提供了一个context上下文属性，你可以通过这个属性去获取进行 一些 vue2.x 用this实现的操作

• ref 声明基础数据类型

创建一个响应式的基础类型，只能监听number、String、boolean等简单的类型，该属性一旦发生更改，都会被检测到。

<template>
   <div>{{count}}</div>             // 1
</template>
import {ref} from "vue"

setup(){
   const count =ref(0)
   count.value++    //必须要加.value
   return{
       count        //一定要return 出去
   }
}

• reactive 声明响应式数据对象

<template>
   <div>{{count.name}}</div>             
</template>
import {reactive} from "vue"

setup(){
   const count =reactive({
      name:'369'
   })
   count.name='857'
   return{
      count 
   }
}

• computed 计算属性

computed 和vue2.x差不多，只是使用前要先引入。

• watchEffect 监听

通过ref或者reactive去创建多个响应式的值，当任何一个值发生改变的时候，立即触发这个函数。

watchEffect方法会返回一个stop handle停止监听。

数据获取方式

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

vue2.x数据存放在data，方法在methods，通过this去调用。

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}

但是在vue3.x这些都没有了，所有的代码全部都在 setup 里面实现，你页面需要哪些方法，就要在当前页引入即可。

循环

学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西。
而vue2.0默认就支持添加重复数据,而且vue2.0还去掉了$index和$key这两个东西换成在循环里定义
Vue 1.0

v-for="(index,val) in array"

Vue 2.0 vue3.0

v-for="(val,index) in array"　　这是vue2.0

给元素附唯一值

vue 1.0 trace-by的方式

<div v-for="item in items" track-by="$index">

vue 2.0 vue3.0 key的方式

<div v-for="item in items" :key="item.id">

自定义键盘指令

vue1.0    Vue.directive('on').keyCodes.f1=17
vue2.0 -3.0   Vue.config.keyCodes.ctrl=17

过滤器

vue 1.0 自带过滤器

        {{msg | currency}}
        {{msg | json}}
        ....
        limitBy
        filterBy
        .....

vue 2.0 删除定义过滤器的步骤
1.定义过滤器函数

2.在filters中声明

3.使用

1.0与2.0 过滤器 传参方式不同
vue 1.0

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

vue 2.0

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

希望这篇文章能让大家体验到一个简单的Vue1、Vue2、Vue3的开发区别。如果大家还有什么问题，可以在评论中提问哦！

以上文章参考了众多文章，总结而成。