vue3学习

一些概念

• SFC Simple-File-Components 单文件组件，也就是一个组件里又js，html和css。

• 构建工具啥意思？直接引用vue可以直接使用vue语法，但是无法使用单文SFC语法。

• 全局构建版本？使用cdn引入的就算？

• ES模块构建版本？

• 导入映射表？Import Maps

模板语法

• 文本插值 Mustache语法，也就是双大括号语法

• 原始HTML，需要使用v-html指令

• 属性绑定，双大括号不能在html属性中使用，需要使用v-bind指令来绑定属性，比如v-bind:src=""，简写就是:src=""

• 同名属性简写，比如:src="src"，则可以简写成:src，3.4+支持

• 动态绑定多个值，通过不带参数的v-bind，可以绑定一个对象，比如v-bind="prop"，而prop定义是prop: {id: 1, name: 'hello'}

• js表达式，也就是return 可以返回的都支持

  {{num+1}}
  {{num.split('').reverse().join('')}}

• 模板语法或者属性调用方法，其实就是methods里定义的方法。

• 动态参数，:[pop]="var"，根据pop变量的值来决定参数，中括号包裹，动态参数中表达式的值应该是一个字符串，动态参数表达式中也不能有空格和引号，限制多多。

• 修饰符 .开头

响应式

data 选项用来声明组件的响应式状态，此选项的值应为返回一个对象的函数。

vue3 数据是使用js proxy代理来实现响应式，跟vue2不同

• 声明方法，使用methods选项，vue自动为methods中的方法绑定了指向组件实例的this，所以定义方法时不能使用箭头函数，因为箭头函数没有自己的上下文

计算属性

模板中的表达式会让代码难以维护，所以推荐用计算属性来描响应式的复杂逻辑，计算属性定义在computed选项里，也是函数定义方法。
计算属性其实跟方法差不多，但是计算属性会缓存值，效率高点。
计算属性默认是只读的，如果需要可写，那么需要提供getter和setter来定义。

class和style绑定

class和style也是属性，可以用v-bind，但是vue增强了这两个属性语法

条件渲染

v-if
v-else
v-else-if
v-show
v-if和v-for不推荐同时使用，因为优先级不明显
v-if是彻底销毁这个元素，而v-show只是用display显示与隐藏

列表渲染

<div v-for="v of list">{{v}}</div> //list是数组, of可以改成in
<div v-for="(v, k) of list">{{v}}</div> //k是键
<div v-for="(v, k) of 10">{{v}}</div> //范围值，v从1到10
<div v-for="(v, k) of 10" :key="k">{{v}}</div> // 推荐给v-for提供key

生命周期

mounted钩子可以用来在组件完成初始渲染并创建dom节点后运行

侦听器