Vue3相比Vue2的一些变化

1.Vue3支持template包含多个根节点

Vue2

<template>
  <div class='form-element'>
      <h2> 外层一个div容器包含其他内容</h2>
  </div>
</template>

Vue3

<template>
  <div class='div1'></div>
  <div class='div2'></div>
</template>

2.Vue3中属性、方法等API和Vue2的重要区别

数据和方法都定义在setup中，并统一进行return;

从vue引入reactive,使用reactive()方法来声名我们的数据为响应性数据,使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据

Vue2

export default {
  props: {
    title: String
  },
//  data---数据
  data () {
    return {
      username: '',
      password: ''
    }
  },
//  methods---方法
  methods: {
    btnClick () {
      console.log(this.username)
    }
  },
//  conponents---组件
  components:{
            "buttonComponent":btnComponent
        },
//  computed---计算属性
  computed:{
	  fullName(){
	    return this.firstName+" "+this.lastName;     
	  }
}
}

Vue3

export default {
  props: {
    title: String
  },
//  setup---数据和方法都定义在setup中，并统一进行return{}
//  从vue引入reactive,使用reactive()方法来声名我们的数据为响应性数据,使用setup()方法来返回我们的响应性数据，从而 
//  template可以获取这些响应性数据
  setup () {
    //定义数据，相当于Vue中的data
    const state = reactive({ 
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
     //统一return
    return { 
      login,
      state
    }
  }
}

template使用，可以通过state.username和state.password获得数据的值。

<template>
  <div>
        <h2> {{ state.username }} </h2>
  </div>
</template>

3.Vue2和Vue生命周期函数区别

setup():开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount(): 组件挂载到节点上之前执行的函数。
onMounted(): 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
若组件被<keep-alive>包含，则多出下面两个钩子函数。
onActivated(): 被包含的组件，会多出两个生命周期钩子函数。被激活时执行 
onDeactivated(): 比如从A组件，切换到B组件，A组件消失时执行。

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

4.父子组件传值

父组件

<template>
      <HelloWorld :transnam="objcon"></HelloWorld>
</template>

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let objcon = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端",
        salary: "21k",
      },
      hobby: [1, 2, 3, 4],
    });
    return {
      objcon,
    };
  },
};

子组件

<template>
  <div class="hello">
    <!-- 直接拿prop里面的transnam -->
    <h2>{{ transnam }}</h2>
    <!-- 拿setup里面的值 -->
    <h2>{{ data.acceptValue }}</h2>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  name: "HelloWorld",
  props: {
    transnam: Object,
  },
  setup(props) {
    let data = reactive({
      acceptValue: props.transnam,
    });
    console.log(data.acceptValue);
    return {
      data,
    };
  },
};
</script>