美文网首页
了解vue3.x新特性

了解vue3.x新特性

作者: 糖小羊儿 | 来源:发表于2021-01-08 09:26 被阅读0次

    1.teleport  将某个dom元素挂载到其他节点

    <teleport to="#app">

          <div id="mountDiv" ref="mountDiv">

                <img src="logo.png" alt />

          </div>

    </teleport>

    以上代码中在vue3中,mountDiv 会变成#app的子节点

    2.vue3取消过滤器filters

    filters过滤器已从Vue 3.0中删除,不再支持,官方建议使用computed来完成数据处理

    3.v-model

    在vue2.0中,v-model只能对应一个变量

    在vue3.0中,在v-model原来的使用基础上,拓展了多对多的使用方式

    查看vue2.0和vue3.0中v-model使用差

    4.在 3.x 中,组件现在可以有多个根节点

    以下写法在vue3中是合理的,这么写vscode会出红色波浪线,所以建议下载 Vue 3 Snippets插件

    <template>

        <header>...</header>

        <mainv-bind="$attrs">...</main>

        <footer>...</footer>

    </template>

    5.v-for的使用

    1.vue3会为v-for自动添加key属性

    2.当我们给template使用v-for的时候,在vue2.0中,我们需要给template的子集添加key属性

    3.在vue3.0中,我们可以直接把key给template

    <template v-for="item in navs"  :key="item">

            <li>{{item}}</li>

          </template>

    6.自定义指令 API 已更改为与组件生命周期一致

    7.Vue CLI v4.5支持选择vue3.0,并且配套的路由是Vue Router 4.0 

    相关文章

      网友评论

          本文标题:了解vue3.x新特性

          本文链接:https://www.haomeiwen.com/subject/ahxwoktx.html