Vue3.2单文件组件setup的语法糖与新特性总结

目录

• 前言
• setup语法糖
• 一、基本用法
• 二、data和methods
• 三、计算属性computed
• 四、监听器watch、watchEffect
• 五、自定义指令directive
• 六、import导入的内容可直接使用
• 七、声明props和emits 
• 八、父组件获取子组件的数据
•  九、provide和inject传值
• 十、路由useRoute和useRouter
• 十一、对await异步的支持
• 十三、全局属性globalProperties
• 十四、生命周期
• 十五、与普通的script标签一起使用
• 十六、v-memo新指令
• style新特性
• 一、局部样式
• 二、深度选择器
• 三、插槽选择器
• 四、全局选择器
• 五、混合使用局部与全局样式
• 六、支持CSS Modules
• 七、与setup一同使用
• 八、动态 CSS
• 参考文献：
• 总结

前言

满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。

在vue2.0时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed...选项里，这样编写的代码不便于后期的查阅（查找一个业务逻辑需要在各个选项来回切换）。setup函数的推出就是为了解决这个问题，让新手开发者更容易上手...

setup语法糖

setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vue组件，对于开发者更加友好了；按需引入computed、watch、directive等选项，一个业务逻辑可以集中编写在一起，让代码更加简洁便于浏览。

一、基本用法

只需在里的代码编译成一个setup函数

普通的

三、计算属性computed

四、监听器watch、watchEffect

1、watch监听器除了使用方式有区别之外，其他的与vue2.0没啥变化

2、watchEffect

watchEffect是Vue3.0新增的一个监听属性的方法，它与watch的区别在于watchEffect不需要指定监听对象，回调函数里可直接获取到修改后的属性的值

五、自定义指令directive

以 vNameOfDirective 的形式来命名本地自定义指令，可以直接在模板中使用

六、import导入的内容可直接使用

 1、导入的模块内容，不需要通过 methods 来暴露它

// utils.js 
export const onShow = function(name) {
    return 'my name is ' + name
}

// Show.vue

 2、导入外部组件，不需要通过components注册使用

// Child.vue

// Parent.vue

七、声明props和emits 

在 

// Parent.vue

 

如果使用了 Typescript，使用纯类型声明来声明 prop 和 emits 也是可以的。

八、父组件获取子组件的数据

父组件要想通过ref获取子组件的变量或函数，子组件须使用defineExpose暴露出去

// Child.vue

 

// Parent.vue

 

 九、provide和inject传值

无论组件层次结构有多深，父组件都可以通过provide 选项来其所有子组件提供数据，子组件通过inject接收数据

// Parent.vue

 

// Child.vue

 

十、路由useRoute和useRouter

十一、对await异步的支持

十二、nextTick

// 方式一

// 方式二

十三、全局属性globalProperties

// main.js里定义
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
 
// 定义一个全局属性$global 
app.config.globalProperties.$global = 'This is a global property.' 
 
app.mount('#app')

// 组件内使用

十四、生命周期

setup()里访问组件的生命周期需要在生命周期钩子前加上“on”，并且没有beforeCreate和created生命周期钩子

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

// 使用方式

十五、与普通的script标签一起使用