学新通技术网

细说javascript框架Vue3和Vue2的部分区别

juejin 45 1
细说javascript框架Vue3和Vue2的部分区别

前言

在这里,利用vue create 命令 通过vue cli脚手架分别创建vue2和vue3项目进行对比。

image.png

1. 碎片(多根元素模板)

在vue3中,组件可以拥有多个根节点,但在vue2中,只能存在唯一的根节点
```html
// vue3
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
```
```html
// vue2
<template>
    <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
```

2. main.js不同

vue2可以使用**pototype(原型)** 的形式去进行操作,引入的是**构造函数**。  
vue3中需要使用**结构**的形式进行操作,引入的是**工厂函数**
```javascript
// vue3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
```javascript
// vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
```

3. 生命周期不同

对于vue3: image.png 对于vue2: image.png

vue2中执行顺序: beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyed
vue3中执行顺序:  setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted
对应关系
vue2->vue3

  • beforeCreate->setup
  • created -> setup
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
    同时,在vue3中,生命周期以函数的形式引入

4. 定义数据变量和方法不同

vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){} ,创建的方法要在methods:{} 中。
vue3:vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。
vue2是选项式api,所以,我们把所有的methods,data,watch,computed等等,都放在vue实例下面 而vue3是一个组合式api,所有的这些东西,都放在setup中, setup(){}包括所有data,methods,created,complate都在里面,setup里面内容需要全部暴露出去才能使用。在Vue2.7版本也可以使用组合式API。 在这里以antd vue 的Form表单代码为例,对于Vue3

<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  setup() {
    const formState = reactive({
      username: '',
      password: '',
      remember: true,
    });

    const onFinish = values => {
      console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    return {
      formState,
      onFinish,
      onFinishFailed,
    };
  },

});
</script>

对于Vue2:

<script>
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
export default {
  data() {
    return {
      hasErrors,
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
    };
  },
  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('userName') && getFieldError('userName');
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('password') && getFieldError('password');
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>

本文出至:学新通技术网

标签: