Vue2和Vue3的区别

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

1. 双向数据绑定原理

vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

3. Composition API

v2

 
export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登陆方法
    }
  },
  components:{
            "buttonComponent":btnComponent
        },
  computed:{
      fullName(){
        return this.firstName+" "+this.lastName;     
      }
}
 
}
 

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据:

从vue引入reactive

使用reactive()方法来声名我们的数据为响应性数据

使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

v3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }
}

4. 建立数据 data

v2

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

v3

<template>
    <div class=''>
       数值 {{num }}  <button @click="num++">Watch</button>
       <p>姓名 : {{ info.name }}</p>
       <p>年龄 : {{ info.age }}</p>
       <p>工龄 : {{ info.user.work }}</p>
       <button @click="info.age++">涨一岁</button>
       <button @click="info.user.work++">涨工龄</button>
    </div>
</template>

<script setup>
import {ref,watch,reactive } from 'vue'
const num = ref(0)
let info = reactive(
    {
        name:"张三",
        age:18,
        user:{
            work:3
        }
    }
)
// 监听多个数据
watch([num,info],()=>{
    console.log('监听变化了');
})
// watch监听对象的属性(简单类型)
watch(()=>info.age,()=>{
    console.log('user.age变化了');
})

// watch监听对象的属性(复杂类型)
watch(()=>info.user,()=>{
    console.log('info.user变化了');
},{
    deep:true
})


</script>

<style lang='scss'>

</style>

<template>
  <div class="about">
    <p>成绩单</p>
    <span v-for="num in scoreList" :key="num">{{ num }}  /</span>
    <p>及格分数</p>
    <span v-for="num1 in filList" :key="num1">{{ num1 }}  /</span>
    <p>{{ str.name }}</p>
    <p>{{ str.age }}</p>
    <button @click="check">改名</button>
    <p>{{ num }}</p>
    <button @click="num++">+1</button>
    <button @click="reduce">-1</button>

  </div>
</template>
<script setup>
import {computed,ref,reactive} from 'vue'
const scoreList = ref([43,65,20,85,96,20,30,41,52])
const filList = computed(()=>{
  return scoreList.value.filter(item => item>60)
})

const str = reactive({
  name:"响应式",
  age:23
})

const check = ()=>{
  str.name=='樱查放'?str.name='响应式':str.name='樱查放'
  str.age++
}

const num = ref(0)
const reduce = ()=>{
  num.value--
  // 使用ref函数转换的响应式数据，获取数据时需用.value，不用会报错TypeError: Assignment to constant variable.
}
</script>