vue3选项式API

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!

系列文章目录

前端系列文章——传送门
后端系列文章——传送门


文章目录

  • 私人博客
  • 系列文章目录
  • vue3选项式API


vue3选项式API

vue3提供了两个语法,一个叫选项式API;另一个叫组合式API。

选项式API跟vue2的使用方式一样的:面向对象的开发模式

大部分内容都跟vue2相同的:

插值表达式

指令一样

methods

directives

mixins

computed

watch

生命周期钩子函数前6个一样。

不一样的地方:

创建vue实例不一样:

const {createApp} = Vue
const app = createApp({
    // data不一样,必须是函数
    data() {
        return {
            
        }
    }
})
// 没有el,只有mount
app.mount('el')

v-if和v-for优先级不一样,vue2中v-for优先,vue3中v-if优先

vue3取消了filter过滤器

vue3自定义指令的钩子函数不一样,简写不一样

vue2简写代表:bind + update - 按钮权限,不能简写,只能用inserted来做

vue3的简写代表:mounted和updated - 按钮权限直接可以简写使用

生命周期钩子函数的最后两个销毁的函数:

​ beforeUnmount

​ unmounted

手动销毁实例,必须是:

app.unmount()

本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog

你可能感兴趣的:(全栈工程师的基本素养,#,前端开发,vue.js,前端,javascript,前端框架)