【实战】Vue3开发注意事项(选项式)

[sleepyShen1989]

声明方法、侦听器回调时避免使用箭头函数

• 箭头函数不绑定this
• this会指向window

watch

• 设置深度监听，在变更（不是替换）对象和数组时，旧值与新值相同，因为他们的引用指向同一个对象/数组
  • 解决方案：在computed属性里添加一个stringify的监听对象，监听该值

样式穿透

• 即使设置了scoped属性，父组件设置标签选择器后，如果子组件内部只有这个标签，则这个标签会得到父组件的设置的样式
  • 解决方案：
  • 使用类选择器（建议）
  • 使用fragment（单组件多个根节点），
  • 子组件外层包一个没被父组件设置过样式的标签

// app.vue
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <h1>hello</h1>
  </div>
  <HelloWorld />
</template>

<style scoped>
h1{
  color:blue
}
</style>

// HelloWorld.vue
<template>
  <h1>Hi,World</h1>
</template>

[sleepyShen1989]

组件通信

禁用Attributes继承

• 在组件选项中设置 inheritAttrs: false。如果你使用了 <script setup>，你需要一个额外的 <script> 块来书写这个选项声明
• 使用场景：需要应用在根节点以外的其他元素上。这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到

props传值

• prop 的校验是在组件实例被创建之前，所以实例的属性 (比如 data、computed 等) 将在 default 或 validator 函数中不可用。
• 对象类型的默认值应当用工厂函数返回

// 对象类型的默认值
propE: {
  type: Object,
  // 对象或者数组应当用工厂函数返回。
  // 工厂函数会收到组件所接收的原始 props
  // 作为参数
  default(rawProps) {
    return { message: 'hello' }
  }
},

emits

• emits 选项会影响一个监听器被解析为组件事件监听器，还是原生 DOM 事件监听器。被声明为组件事件的监听器不会被透传到组件的根元素上，且将从组件的 $attrs 对象中移除
• emits 还可以使用对象的完整形式。该对象的每个属性键是事件的名称，值是 null 或一个验证函数。
• 未通过emits验证函数时，仅抛出警告，值依然会传递

provide

• provide使用函数可以提供其组件中的状态，但所供给的 msg 将不会是响应式的
• 为保证注入方和供给方之间的响应性链接，我们需要使用 computed() 函数提供一个计算属性
• v3.3版本之前需要设置 app.config.unwrapInjectedRef = true 以保证注入会自动解包这个计算属性

provide() {
  return {
    msg: this.msg
  }
}

import { computed } from 'vue'
provide() {
  return {
    // 显式提供一个计算属性
    // 返回ref对象，使用.value获取
    // computed的值是只读的
    message: computed(() => this.message)  
  }
}

[sleepyShen1989]

安全

url注入

<template>
<a :href="userProvidedUrl">click me</a>
</template>

<script>
const userProvidedUrl = ref('javascript:alert(1)')
</script>

• 使用sanitize-url库
• 任何用户提供的 URL 在被保存到数据库之前在应该先在后端做无害化处理

样式劫持

• 通过css进行点击劫持（eg. 在“登录”按钮上方覆盖一个透明的链接）
• 解决方案：
  • 仅在沙盒环境的 iframe 中允许用户控制 CSS
  • 使用其对象值形式并仅允许用户提供能够安全控制的、特定的属性

<a
  :href="sanitizedUrl"
  :style="{
    color: userProvidedColor,
    background: userProvidedBackground
  }"
>
  click me
</a>