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）、 文本插值语法 {{}}

文本插值支持 :

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

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元素，示例<any v-for="item in list">{{item}}</any>

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：监听上下左右四个按键

表单输入绑定 v-model（双向数据绑定）详解

<body>
    <!--输入框-->
    <input type="text" v-model="message">
    <!--单选按钮-->
    <input type="radio" value="option1" v-model="selectedOption">
    <input type="radio" value="option2" v-model="selectedOption">
    <!--复选框-->
    <input type="checkbox"  v-model="checked">
    <!--下拉列表-->
    <select v-model="selectedOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
</body>
<script>
    //vue data 
    data: {
    message: '',
    checked: false,
    selectedOption: ''
    }
</script>

表单修饰符

.lazy：在输入框失去焦点或按下回车键时更新绑定的数据，而不是在每次输入时即时更新

<input type="text" v-model.lazy="textValue">

.number：将用户输入的数组自动转化为数值类型，当type的类型为number时，.number自动启动。

<input type="text" v-model.number="textValue">

.trim：默认自动去除输入字符串首尾的空格

<input type="text" v-model.trim="textValue">

计算属性 computed

计算属性是一种便捷的方式来对响应式数据进行处理并生成新的数据。计算属性会根据它们依赖的响应式数据自动进行更新，并且会缓存计算结果，只有依赖的数据发生变化时才会重新计算。

{{myComputedName}}
<script>
    data(){
        return {
            name:'xiaoming'
        }
    },
    computed:{
       myComputedName(){
        return name+'123'
        } 
    }
</script>

计算属性的优势：

• 缓存：计算属性会缓存计算结果，在依赖的数据未发生变化时直接返回缓存结果，避免不必要的重复计算。
• 响应式：计算属性会自动追踪依赖的响应式数据，并在其变化时进行更新。
• 与方法的对比：与直接在方法中处理数据相比，计算属性的语法更简洁，并且在模板中可以像访问普通属性一样使用。

侦听器 watch

watch 是一个用于监听和响应数据变化的选项

<input type="text" v-model="name" />
<script>
    data(){
        return {
            name:'xiaoming'
        }
    },
    watch:{
       name(newValue,oldValue){
        console.log(newValue,oldvalue)
        } 
    }
</script>

watch的强大功能

1，直接监听方法

<input type="text" v-model="name" />
<script>
    data(){
        return {
            name:'xiaoming'
        }
    },
    watch:{
        name:"myName"
    },
    methods:{
        myName(newValue,oldValue){
            console.log(newValue,oldvalue)
        }
    }
</script>

2，侦听多个

watch可以同时侦听多个数据的改变

watch: {
  obj.name: function(newVal, oldVal) {
    // ...
  },
  obj.age: function(newVal, oldVal) {
    // ...
  }
}

3，深度监听

默认情况下，watch 只会监听对象的引用变化。如果需要深度监听对象内部属性的变化，可以设置 deep: true。

watch: {
  obj: {
    handler: function(newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

4，立即执行

immediate: true，可以在组件初始化时立即执行一次处理函数，不需要等待数据的变化。

watch: {
  obj: {
    //...
    immediate:true
  }
}

Ajax

Ajax是一种用于在客户端和服务器之间进行异步通信的技术。它允许在不刷新整个页面的情况下发送和接收数据，从而提供更好的用户体验。

XHR

XMLHttpRequest是最早的一个异步通信的API ，配置和调用方式比较混乱。

//1，创建HTTP请求
var xhr = new XMLHttpRequest()
//打开服务器连接，设置要请求的接口
// xhr.open(请求方式,接口地址,是否异步请求,)
xhr.open('GET',`http://127.0.0.1:3000/mylogin?user=${a}&pwd=${b}`,true)
//发送请求
xhr.send()
//绑定事件，监听端口响应
xhr.onload = function(){
//获取响应文本
    console.log(xhr.responseText)
    alert(xhr.responseText)
}

Fetch

fetch 是一种用于发送 HTTP 请求的现代 Web API。它提供了一种更简单、更强大的方式来进行网络请求，并且在现代浏览器中被广泛支持。作为W3C推出的新一代异步通信API，在未来，fetch将会最终取代xhr。

//fetch GET
fetch(url, options)
  .then(response => {
    // 处理响应数据
    return response.json(); // 解析响应为 JSON
  })
  .then(data => {
    // 使用响应数据
    console.log('响应数据:', data);
  })

//fetch POST
fetch(url,{
    method:'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name:'xiaoming',
        age:18
    })
})
.then(response => {
    // 处理响应数据
    return response.json(); // 解析响应为 JSON
  })
  .then(data => {
    // 使用响应数据
    console.log('响应数据:', data);
  })

//fetch PUT
fetch(url+id,{
    method:'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name:'xiaoming',
        age:18
    })
})
.then(response => {
    // 处理响应数据
    return response.json(); // 解析响应为 JSON
  })
  .then(data => {
    // 使用响应数据
    console.log('响应数据:', data);
  })

//fetch delete
fetch(url+id,{
    method:'DELETE',
})
.then(response => {
    // 处理响应数据
    return response.json(); // 解析响应为 JSON
  })
  .then(data => {
    // 使用响应数据
    console.log('响应数据:', data);
  })

Axios

Axios 是一个基于 Promise 封装的 第三方库，用于发起 HTTP 请求。它可以在浏览器和 Node.js 中使用，并提供了许多方便的功能和选项，使得发送请求变得更加简单和灵活。

//axios get
axios.get(url)
.then(res=>{
    console.log(res.data)   //响应数据
}).catch(err=>{
    //抛出错误
})
//axios POST
axios.post(url,{
    name:'xiaoming',
    age:18
})
.then(res=>{
    console.log(res.data)   //响应数据
}).catch(err=>{
    //抛出错误
})
//axios PUT
axios.put(url,{
    name:'xiaoming',
    age:18
})
.then(res=>{
    console.log(res.data)   //响应数据
}).catch(err=>{
    //抛出错误
})
//axios DELETE
axios.delete(url,{
    name:'xiaoming',
    age:18
})
.then(res=>{
    console.log(res.data)   //响应数据
}).catch(err=>{
    //抛出错误
})

这三种方法，在实际开发当中都不会完美适配我们的项目，因此无论是xhr,fetch,axios中的哪一个，我们都可以通过封装，使它变得更加适配项目，提升效率。

vue3 过滤器？

在 Vue 2 中，过滤器（Filters）是一种用于格式化和转换模板中数据的功能。通过使用过滤器，你可以在模板中对数据进行处理，以便以特定的格式显示或处理它们。

{{myname | domyname}}
<script>
    data(){
        return{
            myname:''    
        }
    },
    filters:{
        domyname(myname){
            //操作
        }
    }
</script>

vue3已经移除

单文件组件

组件允许我们将UI划分为独立的，可重用的部分，并且可以对每个部分进行单独开发。在下一章，vue脚手架篇，将会重新着重对组件的引入，传参等进行总结。