【Vue3】Vue3核心内容(下)

简介: Vue3核心内容

🎀个人主页:努力学习前端知识的小羊

感谢你们的支持:收藏🎄 点赞🍬 加关注🪐


其他的Composition API

shallowReactive与shallowRef

  • shallowReactive:只处理对象最外层属性的响应式(浅响应式)
  • shallowRef:只处理基本类型的响应式,不进行对象的响应式处理

使用情况:

  • 如果有一个对象数据,结构比较深,但变化时只是外层属性变化===>shallowReactive
  • 如果有一个对象数据,后续功能不会修改该对象的属性,而是生新的对象来替换===>shallowRef

readonly与shallowreadonly

  • readonly:让一个响应式数据变成可读的数据(深只读,即深层次的数据也变为只读数据)
  • shallowReadonly:让一个响应式数据变成浅层次只读的(即,深层次仍为响应式数据)
  • 使用场景:不希望数据被修改

toRaw与markRaw

  • toRaw:

作用:将一个由reactive生成的响应式数据转为普通对象

使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新

  • markRaw:

作用:标记一个对象,使其永远不会在成为响应式对象

应用场景:

1.有些值不应该设置为响应式的,例如复杂的第三方库等

2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

customRef

  • 作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制
  • 案例如下:
<template>
  <input type="text" v-model="keyword">
  <h3>{{ keyword }}</h3>
</template>
<script>
import { ref,customRef } from "vue";
export default {
  name: 'App',
  setup(){
    let timer
    // 自定义一个Ref--名为:myRef
    function myRef(value,delay){
      return customRef((track,trigger)=>{
        return {
          get:function(){
            console.log('读取数据了');
            track()  //通知Vue追踪数据变化
            return value
          },
          set:function(newvalue){
            console.log("数据修改了");
            clearTimeout(timer)
            // trigger()  //通知Vue重新解析模版
          //实现防抖  
            timer = setTimeout(()=>{
              value = newvalue
              trigger()
            },delay)
          },
        }
      })
    }
    // let keyword = ref('hello') //使用Vue提供的ref
    let keyword = myRef('hello',300) //使用程序员自定义的ref
    return{
      keyword
    }
  }
}
</script>

provide与inject

  • 作用:实现祖与后代组件间通信
  • 套路:祖组件通过provide将数据传给后代组件,后代组件通过inject接收数据
  • 写法:

1.祖组件

setup(){
    let car = reactive({
      name:"奔驰",
      price:'40w'
    })
    provide('car',car) //给自己的后代组件传递数据
    return {...toRefs(car)}
  }

2.后代组件

setup(){
        let car = inject('car')
        console.log(car);
        return {car}
    }

响应式数据的判断

  • isRef:检查一个值是否是ref对象
  • isReactive:检查一个对象是否有reactive创建的响应式代理
  • isReadonly:检查一个对象是否是由readonly创建的只读代理
  • isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理

新的组件

Fragment

  • Vue2中:组件必须有一个根标签template
  • vue3:组件可以没有根标签,内部会将多个根标签包含在一个Fragment虚拟元素中
  • 好处:减少标签层级,减少内存占用

Teleport

概念:teleport是一种能够将我们的组件html结构移动到指定位置的技术

<div>
    <button @click="isshow = true">点我弹个窗</button>
    <teleport to='body' >
        <div class="mask" v-if="isshow">
            <div class="dialog" >
            <h3>我是一个弹窗</h3>
            <h4>一些内容</h4>        
            <h4>一些内容</h4>
            <h4>一些内容</h4>
            <button @click="isshow = false">关闭弹窗</button>
        </div>
        </div>
    </teleport>
  </div>

Suspense

  • 等待异步组件渲染一些额外内容,让应用有更好的用户体验
  • 使用步骤:

异步引入组件:

import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入

使用Suspense包裹组件,并配置好dafault与fallback

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>稍等,加载中...</h3>
      </template>
    </Suspense>
  </div>
</template>
目录
相关文章
|
25天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
127 64
|
25天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
107 60
|
25天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
30 8
|
25天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
28 1
|
25天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
35 1
|
25天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
1月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
1月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
62 1
|
29天前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
40 0
|
29天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
56 0