vue2和vue3的区别

1.vue2中的options API(选项型API) 和vue3中的composition API(合成型API)

在options API中，将代码分割成不同的属性，例如data,methods,computed,watch，生命周期函数。

而在composition API中，可以用方法来分割代码，这样相对于旧的分组方式会更整洁。

在vue2中，在data声明后可以使用

而vue3中，需要在setup方法里面声明，且此方法在组件初始化构造时触发。

为了能在vue3中操作data,可以使用【反应API，即 reactivity API】,在组件中的声明方法如下：

​ 从vue中引入reactive=>在setup中使用reactive()声明数据为响应性数据，并return变量名，之后即可在templete中使用。

import { reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}

2.vue3 setup函数中没有this

3.vue2在data中声明变量，vue3在setup中用ref声明常量，reactive声明变量，return出来

4.vue2在methods声明方法，vue3在setup中声明，将login return出来

setup () {
    const login = () => {
      // 登陆方法
    }
    return { 
      login
    }
  }

5.vue2的生命周期函数可以直接声明，vue3中需要放在setup生命周期中

 setup(){
       onMounted(async ()=>{
         let res  = await  Get('/user/account')
        console.log(res)
      })
      return{
        
      }
    },

6.vue2计算属性用computed,vue3计算属性在setup中和变量一起调用

 setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }

7.vue2和vue3最大的区别是接受组件props的参数传递

在vue2中，this代表的是当前组件，不是某一个特定的属性。可以直接使用this访问props属性值。

methods:{
	getvalue(){
		console.log(this.value)
	}
}

但是在vue3中,this无法直接拿到props属性，emit event(触发事件),和组件内的其他属性。

但是全新的setup函数可以接受两个参数 props和context,其中，props可以接受多种数据类型,attrs只能接受String类型。

props要先声名才能取值，若未声明则指都在context.attrs

//在父组件中
<template>
   <p> 注册界面</p>
   <son size='small' count='' disabled />
</template>

<script>

import  son from './../components/son.vue'
export default {
    components:{
        son
    },
}
</script>

<style>

</style>

//在子组件中
<template>  
        <p>子页面</p>
</template>
<script>
import { h, ref, reactive } from 'vue'
export default {
    props:{
      size:String,
      count:Number
    },
     setup(props,context) {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    console.log(props.size)
     console.log('props:',{
            ...props
        })
        console.log('attrs:',{
            ...context.attrs
        })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', ['DOM元素为函数：',readersNumber.value, book.title])
   
    //this
    //在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。
    //这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
  }
}
</script>

最终的打印结果为

8.在vue2中只有一个根节点，而在vue3中可以存在多个根节点

在vue2中可以直接在data中取数据

而在vue3中 反应数据(Reactive Data)是包含在一个反应状态(Reactive state)变量中，所以我们需要访问这个反应状态来获取数据值。

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input
     type='text'
     v-model='state.username'
     placeholder='Username'
    />
    
    <input
     type='password'
     v-model='state.password'
     placeholder='Password'
    />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>

9.子组件向父组件传axios请求结果的值

  //子组件
  setup(props, {emit}) {
    onBeforeMount(async () => {
      //调用方法
      let res = await tGet("/wx_login");
      console.log(res.config.baseURL + res.config.url);
       emit('url', {
        url: res.config.baseURL + res.config.url,
      })
    })
    //在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。
    //这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
  },

//父组件
<son  @url='url' />

 setup(){
        
        //在vue3中常量不能再次赋值，也无法改变，不能用state1判断状态
        // const state1 = ref(0)
        const url1 = reactive({param1:'',state1:'0'})
        function url(param){
            console.log('父组件拿到的emit值',param)
            url1.param1 = param.url         
        }
        return{
            url,
            url1
        }
    }

10.toRefs和:v-model一样，不能动态改变

 setup(){
        
        //在vue3中常量不能再次赋值
        // const state1 = ref(0)
        const url1 = reactive({param1:'',state1:'0'})
        function url(param){
            console.log('父组件拿到的emit值',param)
            url1.param1 = param.url
            if(url1.param1!=''){
                url1.state1='1'
                const data = toRefs(reactive({param1:'',state1:'0'}))
                console.log(data)
                console.log(data.param1.value)
               return () => h("div", ["DOM元素为函数："]);
            }
            
        }
        return{
            url,
            url1
        }
    }
    
    //上图拿到param之后，url1.param1已经有值了。
    //但是重新用toRefs声明之后，声明什么就是什么，不会响应式改变。