首页 > 其他 > 详细

vue2和vue3的代码区别

时间:2021-04-13 10:20:44      阅读:29      评论:0      收藏:0      [点我收藏+]

vue2

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

    <button @click=‘login‘>
      Submit
    </button>
    <p> 
      Values: {{ username + ‘ ‘ + password }}
    </p>
  </div>
</template>
<script>
export default {
  props: {
    title: String
  },
  data () {
    return {
      username: ‘‘,
      password: ‘‘
    }
  },
  mounted () {
    console.log(‘title: ‘ + this.title)
  },
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  },
  methods: {
    login () {
      this.$emit(‘login‘, {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

vue3

<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>
<script>
import { reactive, onMounted, computed } from ‘vue‘

export default {
  props: {
    title: String
  },
  setup (props, { emit }) {
    const state = reactive({
      username: ‘‘,
      password: ‘‘,
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    onMounted(() => {
      console.log(‘title: ‘ + props.title)
    })

    const login = () => {
      emit(‘login‘, {
        username: state.username,
        password: state.password
      })
    }

    return { 
      login,
      state
    }
  }
}
</script>

详细区别:

  1. data 响应式原理不同,2用的是Object.defineproperty,3用的是proxy。3中用的是reactive,先引入,然后可以直接在setup中定义,return出来。
  2. methods直接写在setup中
  3. computed引入直接当成一个方法来用,返回的结果值赋给变量
  4. 生命钩子函数除了create和beforecreate之外是直接引入,前面加个on,然后当方法执行。!destroyed和beforedestroy没了,换成unmount和beforeunmount。
  5. setup中的两个参数:props和context(emit,slots,attrs),3没了this,于是可以用这两个参数代替

总结:

  1. 全新的合成式API(Composition API)可以提升代码的解耦程度,
  2. 很多使用方式都和React非常相近
  3. 按需引用的有了更细微的可控性

注意:
使用proxy的优势如下

  1. defineProperty只能监听某个属性,不能对全对象监听
  2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
  3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

变化总结:

  1. 双向数据绑定原理
  2. 默认进行懒观察(lazy observation):在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
  3. 更精准的变更通知
  4. 3.0 新加入了 TypeScript 以及 PWA 的支持
  5. vue2和vue3组件发送改变

参考链接:

https://zhuanlan.zhihu.com/p/139590941

vue2和vue3的代码区别

原文:https://www.cnblogs.com/maikailuu/p/14651238.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!