关于vue3:vue3功能详解

HTML 文本响应

• 间接文本变量
  <span>Message: {{msg}}</span>
  文本由双大括号内的变量（组件实例中 msg 属性）的值代替。同时每次 msg 属性更改时它也会同步更新。
• 标签属性变量
  <span v-text=”msg”></span>
  变量放在标签 v -text 属性里，会笼罩本标签内的文本和后辈标签的文本，要慎用。
  v-html 与 v-text 相似，v-html 会编译 html 代码后输入文本

HTML 属性响应

• 写法
  <div v-bind:id=”msg”></div>
  v-bind: 属性 =”msg”，简写 : 属性 =”msg”
• 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除。
• 布尔型属性
  空字符串 (即 <button disabled=””>) 时，该属性不会移除，而当其为其余非 true 时，该属性会移除。

• 动静绑定多个属性
  <div v-bind=”object”></div>
  不带“: 属性”，赋值一个对象，对象能够包函多个属性。

  const object = {
  id: 'container',
  class: 'wrapper'}

  编辑中，前面的内容是些速记的一些乱七八的，后继会欠缺，倡议不用看前面的内容。

被编译成组件 setup() 函数的内容。这意味着与一般的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创立的时候执行
申明的顶层的绑定 (包含变量，函数申明，以及 import 引入的内容) 都能在模板中间接应用
import 导入的内容也会以同样的形式裸露。意味着能够在模板表达式中间接应用导入的 helper 函数，并不需要通过 methods 选项来裸露它
<script setup> 范畴里的值也能被间接作为自定义组件的标签名应用
因为组件被援用为变量而不是作为字符串键来注册的，在 <script setup> 中要应用动静组件的时候，就应该应用动静的:is 来绑定。<component :is=”Foo” />。递归组件？？？命名空间组件？？？？顶层 await？？？？
引入的组件命名须要首字母大写？？？！！
一般 <script>, 只会执行一次
有些 setup()之外的配置项在 script setup 中不实用，能够联合一般 script 一起应用。
setup()在组件创立之前执行，是组合式 API 的入口
setup 中的生命周期，应用时须要导入
其中 beforeCreate 和 created 间接写在 setup 中

申明响应式状态

import {reactive} from 'vue'

const state = reactive({count: 0})

function increment() {state.count++}

<script setup> 中的顶层的导入和变量申明可在同一组件的模板中间接应用。你能够了解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。

计算属性

<div>{{msg}}</div>
import {reactive, computed} from ‘vue’
const msg= computed(() => {
if 因子 than return XXX
})