美文网首页
vue学习(68)vue3中的其他改变

vue学习(68)vue3中的其他改变

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-05-05 15:55 被阅读0次
    1. 全局API的转移
    • Vue 2.x 有许多全局 API 和配置
      1. 例如:注册全局组件、注册全局指令等。
    //注册全局组件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注册全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }
    
    • Vue3.0中对这些API做出了调整:
      1. 将全局的API,即:Vue.xxx调整到应用实例(app)上


        image.png
    1. 其他改变
      1. data选项应始终被声明为一个函数。
      2. 移除keyCode作为 v-on 的修饰符
      3. 移除v-on.native修饰符
        1. 父组件中绑定事件
    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />
    
    1. 子组件中声明自定义事件
    <script>
      export default {
        emits: ['close']
      }
    </script>
    
    4. 移除过滤器(filter)
        过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。
    

    .....

    相关文章

      网友评论

          本文标题:vue学习(68)vue3中的其他改变

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