文章目录

• • 组合式API
  • setup
  • 响应式原理
  • ref对象解包
  • 模板的语法
  • v-bind

组合式API

• 在组合式api中直接声明的变量，就是一个普通的变量，不是响应式属性
• 修改这些属性时，不会在视图中产生效果
• 可以通过 reactive()来创建一个响应式的对象
• 在setup()中可以通过返回值来指定那些内容要暴露给外部
• 暴露后的内容，可以在模板中直接使用

setup

• 在script标签中加上setup，就说明要使用组合式API

响应式原理

reactive()

• 返回一个对象的响应式代理
• 返回的是一个深层响应式对象
• 也可以使用shallowReactive()创建一个浅层响应式对象
• 缺点：
  • 只能返回对象的响应式代理！不能处理原始值

ref()

• 接收一个任意值，并返回它的响应式代理
• ref在生成响应式代理时，它是将值包装为了一个对象 0 --> {value:0}
• 访问ref对象时，必须通过 对象.value 来访问其中的值
• 在模板template中，ref对象会被自动解包，不用通过.value来访问
• vue给我们提供了一个语法糖，使得ref对象在script标签中也可以自动解包
• $是一个实验性的，需要在vite插件(vite.config.js)中做一些配置 reactivityTransform:true.即在这里修改

plugins: [vue({eactivityTransform:true
})],

ref对象解包

模板的语法

• 在模板中，可以直接访问到组件中声明的变量

  • 除了组件中的变量外，vue也为我们提供了一些全局对象可以访问：
    比如：Date、Math、RegExp …
    除此之外，也可以通过app对象来向vue中添加一些全局变量
    在main.js中添加app.config.globalProperties
  • 使用插值(双大括号)，只能使用表达式
    表达式，就是有返回值的语句
  • 插值实际上就是在修改元素的textContent，
    如果内容中含有标签，标签会被转义显示，不会作为标签生效

  指令：

  • 指令模板中为标签设置的一些特殊属性，它可以用来设置标签如何显示内容
  • 指令使用v-开头
    v-text 将表达式的值作为元素的textContent插入，作用同{{}}
    使用指令时，不需要通过{{}}来指定表达式
    v-html 将表达式的值作为元素的innerHTML插入，有xss攻击的风险

v-bind

• 当我们需要为标签动态的设置属性时，需要使用v-bind指令,
  • v-bind可以简写为 :
• 当我们为一个布尔值设置属性时，
  • 如果值为true，则元素上有该属性（转换后为true，也算true）
  • 如果值为false，则元素没有该属性（转换后为false，也算false）
  • 特殊情况：“” 空串，在这里会被当成真值

动态参数
同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

 ... 
 ... 

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。