vue3的特性预览

2023-01-15 151

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3的特性预览

vue3的特性预览

据说，8月份vue3就正式发布了！

于是最近，听了大圣的关于vue3直播课，本文是简单总结以下内容

vue3的组成部分

runtime-dom（其核心是runtime-core）
reactivity（可以脱离浏览器独立使用）
compile-dom（其核心是compile-core）

vue3的特点

性能 (⽐vue2快了2倍，proxy => defineProperty，compile-core重写)
新增composition api （类似hooks）
新增组件Fragment, Teleport, Suspense
更加支持ts

compile-core是个啥

compile-core，其实就是将template变成js，返回vdom。

而vue3重写了compile-core。

vue3的vdom分析，核心点如下：

vue2无差别标记所有的节点
vue3动态标记节点，也就是纯静态和动态会被分别标记（一旦_createVNode传第四个参数，就是动态节点。动态节点会维护在一个数组里。且不同类型的节点会进行位运算来判定）
关于diff算法：vue2使用双端比较，vue3加入了最长递增子序列

composition api是个啥

Vue Composition API的官方网址

以前data只是数据的集合，改数据的话，需要用methods。

而composition就是将数据和修改数据放在一块~~

composition = @vue/reactivity + 生命周期
setup可以将相同的东西放在一块，比如修改某些变量，不用在data methods watch 上下横跳
同时可以将mixin也换成普通的function
@vue/reactivity是响应式的插件，独立于vue，可以在非浏览器中使用，关键方法ref,effect,computed,watchEffect，以下是在node中使用

// node里独立使用reactivity
// https://github.com/shengxinjing/vue3-vs-vue2/blob/master/workshop/node-reactivity/server.js
const {ref, computed,effect} = require('@vue/reactivity')
let count = ref(1)
setInterval(()=>{
  count.value++
},1000)
// let double = computed(()=> count.value*2)
effect(()=>{
  console.log('count is',count.value)
})

Fragment, Teleport, Suspense是个啥

Fragment就是以后vue组件的template不需要一个根节点了
Teleport就是可以渲染vue的组件内容，到指定的dom节点，做弹窗比较有用。因为弹窗需要渲染到最外层body下面，否则嵌套过多，蒙层可能会被父元素的transform影响
suspend就是异步组件，可以用于加载的时候

<!-- Fragment -->
<template>
    <h1>哈喽</h1>
    <div>我真棒</div>
</template>

<!-- Teleport -->
  <!-- 现有一个html文件 -->
  <body>
    <div id="app"></div>
    <div id="foot-container"> </div>
    <script type="module" src="/src/main.js"></script>
  </body>
  <!-- 写组件的时候 -->
  <template>
  <div class="confirm-modal">
      <button @click="isOpen = true">打开</button>
      <!-- 注意这一块代码 -->
      <Teleport to="#foot-container">
          <div v-if="isOpen">
            <p>底部信息底部信息底部信息底部信息底部信息底部信息</p>
            <button @click="isOpen = false">取消</button>
          </div>
      </Teleport>
  </div>
  </template>
  <script>
  import {ref} from 'vue'
  export default {
      setup(){
          const isOpen = ref(false)
          return {isOpen}
      }
  }
  </script>

<!--  Suspense -->
  <!-- 随便来个普通的组件 -->
<template>
  <h1>一个异步小组件</h1>
</template>
<script>
  function sleep(timeout) {
    return new Promise(resolve => setTimeout(resolve, timeout));
  }
  export default {
    name: "AsyncComponent",
    props: {
      timeout: {
        type: Number,
        required: true
      }
    },
    async setup(props) {
      await sleep(props.timeout);
    }
  };
  </script>
  <!-- 使用的时候 -->
<template>
  <h1>Supense</h1>
  <Suspense>
    <template #default>
      <AsyncComponent :timeout="3000" />
    </template>
    <template #fallback>
      <h1>加载中</h1>
    </template>
  </Suspense>
</template>
<script>
import AsyncComponent from './AsyncComponent.vue'
export default {
  components:{
    AsyncComponent
  }
}
</script>