vue3笔记-基础篇

vue3笔记

第一章 基础篇

MVVM框架

vue数据绑定方法

Object.defineProperty()

vue2使用的数据绑定方法

var obj = {}
Object.defineProperty(obj,"myname",{
    get(){
        consloe.log("get")
    }
    set(value){
        console.log("set",value)
    }
}

proxy代理

vue3使用的数据绑定方法，使用一个中间代理vm，来帮助拦截所有的更新

var obj = {}
var vm = new Proxy(onj,{
    get(obj,key){
       return obj[key]
    },
    set(obj,key,value0){
        obj[key]=value
    }
})

模板语法

1）、 文本插值语法 {{}}

文本插值支持 :

数据显示：{{变量}}、表达式计算：{{变量1 + 变量2}}、调用方法：{{fn()}}

2）、v-bind:

v-bind 是 Vue.js 提供的一种指令，用于动态地将属性绑定到 Vue 实例的数据，包括 HTML 元素的属性、CSS 类和内联样式等。它有缩写形式 : 和完整形式 v-bind:

3）、v-on:

v-on 是 Vue.js 提供的一种指令，用于监听 DOM 事件并触发相应的方法。它有缩写形式 @ 和完整形式 v-on:，可以将各种事件与 Vue 实例中的方法进行绑定。

4）、v-show

v-show 是 Vue.js 提供的一种指令，用于根据条件的真假值来控制 HTML 元素的显示和隐藏。它通过切换元素的 CSS 属性 display 来实现，不会从 DOM 中移除元素。

5）、v-if

v-if是Vue.js提供的一种指令，用于根据条件的真假值来控制HTML元素的显示和隐藏，它会直接从DOM 中直接删除掉元素。

6）、v-for

v-for是Vue.js提供的一种指令，用来遍历数组或对象，根据遍历的值生成HTML元素，示例{{item}}

7）、v-model

v-model 是 Vue.js 提供的一种指令，用于实现表单元素和数据之间的双向绑定。它使得表单数据的更新能够自动反映到 Vue 实例的数据上，同时也能够将 Vue 实例数据的变化实时反映到表单元素上。

详解vue指令

1）、v-html的陷阱

v-html 是 Vue.js 框架中的一个指令，用于将一段字符串作为 HTML 解析并渲染到页面上。

v-html会把得到的data直接解析为html，在使用时需要确保内容的安全性。避免使用不受信任的内容，以防止跨站脚本攻击（XSS攻击）。尤其在用户可以自有输入的地方，需要对特殊符号进行转义输入，对于非受信来源的数据用插值语法{{}}进行渲染，它会直接输出内容，不进行解析。

2）、样式绑定（class,style）

class在vue中是用来绑定css类的属性，还可以使用:class指令来动态的绑定CSS 类。:class可以根据表达式的值来决定应该添加哪些 CSS 类，从而实现动态控制元素的样式。

<div :class="{ 'active': isActive, 'error': hasError }">div>

<div :class="[activeClass, errorClass]">div>

<div :class="className">div>

style同上，遇到形如background-color这种属性是，要么使用"background-color"这样去包裹，或者写成大驼峰式命名backgroundColor。

4）、条件渲染 v-if (v-if v-else-if v-else) v-show

v-if是真实的按条件进行渲染，只有在条件为真的时候，才会对条件区块内的元素在DOM树上进行创建，当条件为假时，从DOM树中将元素进行销毁。

v-show不管条件真假，都会将元素在DOM树上创建出来，当条件为真时，将元素显示出来，当条件为假时，将元素隐藏。

因此，v-show在初始加载时比v-if更加消耗资源，发生切换时v-if比v-show消耗更多资源，所以，v-show用在切换比较频繁的地方，v-if则用在需要更快加载的地方；

v-if ,v-else-if ,v-else三者的关系很像 if,else-if,else的关系，都是用于元素条件渲染的指令，但是后两个使用时必须要有v-if的使用，并且不能断开

示例：

<div v-if='条件'>div>
<div v-else-if='条件'>div>
<div v-else='条件'>div>

<div v-if='条件'>div>
<div>div>
<div v-else='条件'>div>

5）、列表渲染 v-for

简单使用v-for=(item in dataList)

如果我们需要对渲染出来的列表进行操作，可以在for循环时加入一个参数用来接收下标：

v-for=((item,index) in dataList) index就是我们需要的值，在对列表进行操作时将index传入，便能够精确对渲染列表的指定项操作。

一般来说，后端响应给我们的数据都是对象数组，我们循环得到的item，在渲染时还需要操作取出属性值，如果我们确定的知道需要的属性，可以直接解构循环：

v-for=({prop1,prop2,prop3} in dataList)

key的选值对于性能的影响

key的重要性

Vue 使用 key 来追踪和管理每个节点的身份，它能够高效地判断哪些元素被添加、更新或移除。使用 key 可以帮助 Vue 识别出列表中每个项的变化，并且在更新 DOM 时更准确地定位到它们，以提高性能和避免不必要的重新渲染。

1. 重用和重新排序：
   当列表的顺序发生变化或有新项被添加到列表中时，Vue 会利用 key 来尽可能地复用已存在的元素，而不是全新渲染所有的元素。如果没有提供 key，Vue 会采用一种“就地复用”的策略，这意味着元素的内部状态可能会被保留，但是位置调整会导致重新渲染。

2. 元素的身份判断： key 值在循环过程中充当元素的唯一标识，Vue 使用 key 来确定元素的身份。在处理列表更新时，Vue 会比较新旧元素的 key 值，来决定是否复用、更新或移除元素。

3. 绑定的状态保持：
   当使用 v-for 循环渲染表单元素等绑定了状态的元素时，key 不仅影响列表项的复用，还可以确保输入框、复选框等元素的值保持正确。每个具有不同 key 的元素都会被视为独立的实例，并且它们的状态不会相互影响。

如何设置key

一般设置key的选值 item中的id,item中不重复的值，循环时的index。选择的优先级：id>不重复的值>index

index在有破环列表顺序的插入，删除的操作的时候，index索引值并不会唯一对应列表数据，这个时候虚拟DOM根据更新的列表去对比真实DOM时，更改的地方越靠，真实DOM与虚拟DOM相差越多，更新页面消耗的资源越多。因此，我们需要慎重选择key的值。

数组变动监测

vue能够监听响应式数组的变更方法，并在他们被调用的时候触发相关的更新。这些变更方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse()；但是对于一些不改变原数组的方法，如：filter(),concat(),slice()这些方法操作原数组，但是不改变原数组，而是返回一个新的数组，这时vue看到的情况就是数组没有发生改变，也就不会进行相应的更新。对于这种情况，我们需要手动告知vue数组发生了变化，或者采取vue中compute或watch方法。

事件处理器

内联事件处理器

内联事件处理器是一种将事件处理逻辑直接写在 HTML 元素的属性中的方法。通过内联事件处理器，可以在特定事件发生时执行指定的 JavaScript 代码

<button @click="count++">button>
<button @click="handleAdd(自定义参数)">button>

方法事件处理器

方法事件处理器是一种将事件处理逻辑封装在 JavaScript 方法中，然后通过事件监听器将该方法与特定的事件关联起来的方式。

<button @click="handleAdd">button>

当我们不传入任何的参数的时候，vue会自动给我们传递一个event。里面包含一些必要的参数，在调用handelAdd的时候，可以直接使用：

function handleAdd(event){
    consloe.log(event)
}

修饰符

事件修饰符

事件修饰符是一种用于修改事件行为的特殊语法。事件修饰符可以附加到事件处理器中，以便更精确地控制事件的触发和处理。

• .stop：阻止事件冒泡。当事件处理器中使用 .stop 修饰符时，事件将停止向上层元素传播，防止其他元素上的相同事件被触发。

  <button @click.stop="handleClick">点击我button>
  

• .prevent：阻止事件的默认行为。通过使用 .prevent 修饰符，可以阻止元素上默认的事件行为发生，例如表单的提交或超链接的跳转。

  `<form @submit.prevent="handleSubmit">  form>
  

• .capture：使用事件捕获阶段来处理事件。通常，事件处理器会在事件冒泡阶段触发，但使用 .capture 修饰符可以将事件处理转移到事件捕获阶段。

  <div @click.capture="handleClick">点击我div>
  

• .self：只有当事件是由元素自身触发时才触发事件处理器。如果事件由内部元素触发而不是元素本身，则事件处理器不会被触发。

  <div @click.self="handleClick"> <button>内部按钮button> div>
  

• .once：阻止事件被多次触发，事件触发一次以后，禁用事件

  <div @click.once="handleClick">点击我div>
  

• .passive：一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能（tip:prevent 与 passive 不可以同时使用）

按键修饰符

• .enter ：监听回车键事件

• .tab：监听tab按键

• .delete：监听Delete按键

• .esc：监听esc按键

• .space：监听空格按键

• up,down,left,right：监听上下左右四个按键