Vue3的重大变化

鹿路陆
46 阅读3分钟

Vue3的重大变化

createAPP

vue2中使用构造函数的方式，生成一个Vue实例，vue3中不存在Vue构造函数，使用具名导出

  • vue2中

        const app = new Vue(options);
    app.$mount('app');

  • vue3中

        import { createApp } from 'vue'
    const app = createApp(App);
    app.mount('#app')

    vue3是截断式的更新，传统Vue2构造函数不兼容。createApp生成的较纯洁的应用对象，只有必须使用到的方法和属性。

this指向

先实现一个传统的点击按钮增加功能，在vue3中使用vue2的方式】

    <template>
      <p>
       <button @click="handleClick">count:{{ count }}</button>
      </p>
    </template>
    <script>

    export default {
      data(){
        return {
          count: 0
        }
      },
      methods: {
        handleClick(){
          this.count ++;
        }
      }
    }
    </script>

vue3兼容vue2组件写法。看着没什么差别，但是我们知道vue2中this指向Vue实例，当我们输出this

image.png

this是一个proxy代理对象

image.png

该代理大多数只是有一个传递的作用

当我们读取this.count时，组件代理对象会访问组件实例的count，再将组件实例返回的值通过代理返回，所以我们仍可以读取到this中的值

composition API

vue2中使用的是option API，即配置式的，用过这种开发过页面的小伙伴都知道，如果组件比较复杂，样式、方法、计算属性等等的距离太远了，太零散了，更改一个功能要滑半天，很烦

而composition API呢，我们先实现点击增加的功能

    export default {
      setup() {
        console.log('在所有声明周期函数前运行')
        console.log(this);  //undefined
        let count = 0;
        const increase = () => {
          console.log('increase');·
          count ++;
        }
        return {
          count,
          increase
        }

      }
    }
  • setup函数在所有声明函数前运行
  • setup函数中this为undefined
  • setup函数可以返回一个对象，返回的对象会挂载到组件实例上

看着好像没什么问题，但是点了数字不改变啊，但是控制台输出了increase

那试试卸载行间上呢，同样是不行

count实际上是增加了的，改变了但是页面没刷新，没有响应式，看代码也知道，一个普通的变量count也不会出发页面的重新刷新，

实现响应式方法：import { ref } from 'vue'，并且

    let count = ref(0);

现在正常运行了，点击按钮实现数字+1，ref只是vue3提供的一个方法，还有其他方式也可以实现响应式

setup函数中打印count发现，是一个对象，

image.png

但是我们的模板中仍任写的是count啊，还能正常运行？

别忘了，还有一层代理呢，当我们访问count时，代理访问真正的实例是count.value

setup中count是一个对象，而在实例代理中（即模板中），实际访问的是count.value

那么在setup中访问count需要使用count.value，在实例中使用count，建议setup函数中命名为countRef，使用countRef.value

  • 有小伙伴就要问了，这也没有解决options Api的问题啊，别急

我们可以发现，count和increase并没有依赖setup函数里的值，是不是可以提一个函数出来

<script>
    import { ref } from 'vue'

    function useCount() {
      let countRef = ref(0);
      const increase = () => {
        countRef.value++;
      }
      return {
        countRef,
        increase
      }
    }

    export default {
      setup() {
        return {
          ...useCount()
        }
      }
    }
</script>

功能也是正确实现了 image.png

试想一下，每个功能都封一个函数，写代码简直太爽了，是不是真像写诗一样哈哈哈，十分优雅

    export default {
      setup() {
        return {
          ...useCount(),
          ...useScore(),
          ...userPlay()
        }
      }
    }

总结以下vue3的重大变化

  • createAPP：使用createApp生成实例而不是使用构造函数
  • this指向：使用vue2的写法时，this是一个代理对象，而不是直接指向组件实例
  • composition API：
    1. 在setup函数中书写代码，返回一个对象，挂载到实例中
    2. 需要使用vue3提供的函数将值响应式化
    3. 响应化后setup中count是一个对象，访问值使用count.value，而在实例代理中（即模板中）虽然使用count，实际访问的是count.value，为了避免混淆，命名需不同
avatar
文章
阅读
粉丝