关注

vue - 基本使用

转载改编自：https://www.bilibili.com/video/BV1Ap4y1W7MG/

文章目录

二、Composition API（组合式API）

相当于 React Hooks

我们先使用以前vue2的方式实现一个累加：

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
export default {
    data(){
        return {
            count: 0
        }
    },
    methods: {
        btnClick(){
            this.count++;
        }
    }
}
</script>

这套代码可以实现一个累加的效果，但如果以后我们想把这个组件中的 count 字段与 btnClick 单独拎出来管理，那就比较麻烦了，因为 count 和 btnClick 不在同一个方法内，很难抽离。

1、setup

setup有以下特性：

  1. setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
  2. setup函数是 Composition API（组合API）的入口
  3. 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
  4. 由于我们不能在 setup函数中使用 data 和 methods，所以Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
  5. setup函数只能是同步的不能是异步的

2、API - ref

我们先来体验一下vue3怎么处理这个累加效果：

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
import {ref} from 'vue'
export default {
    data(){
        return {
            count: 0
        }
    },
    setup(){
        const count = ref(1);	// 此时我们使用ref指定count的默认值为1，因此上面data中的count会失效
        let btnClick = () => {
            count.value++;		// 修改ref中的值要用xxx.value
        }
        return {count, btnClick}
    }
}

此时如果我想单独管理这个累加效果，我就可以这么操作：

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
import {ref} from 'vue'
export default {
    data(){
        return {
            // count: 0		// 一旦把setup中的代码抽离，return中对应的值要去掉，否则ref无效
        }
    },
    setup(){
      	// 函数调用后就会返回一个对象，因此我们直接return
        return clickCountFn()
      	// 如果后期还想同时返回其他数据，可以将clickCountFn()的返回结果展开
      	// return {...clickCountFn(), 其他数据}
    }
}

// 封装一个函数，这样这块功能我们就能单独管理了
function clickCountFn(){
    const count = ref(1);
    let btnClick = () => {
        count.value++;
    }
    return {count, btnClick}
}
</script>

3、API - reactive （对象）

再来了解另一个API ：

reactive函数和ref作用非常接近，但是它的参数是一个对象，我们可以在对象中定义其方法，而通过这个形式，就不需要再对其进行进行 .value 调用了。

  • reactive 往往会搭配 toRefs 一起使用
  • 使用 reactive 生成的对象与 ref 生成的值都是响应式的。
<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
  
  <p>姓名：{{obj.username}}</p>
  <button @click="btnClick1">修改姓名</button>
</template>

<script>
import {ref, reactive} from 'vue'
export default {
    setup(){
      	// 使用reactive
        let obj = reactive({
            username: "Jack"
        })
        let btnClick1 = () => {
            obj.username = "Mary"
        }
				return {...clickCountFn(), obj, btnClick1}
    }
}

function clickCountFn(){
    const count = ref(1);
    let btnClick = () => {
        count.value++;
    }
    return {count, btnClick}
}
</script>

这里可以看到我们在 html 中调用数据时，使用的是 obj.username ，那我们是否可以直接写 username 呢？答案是可以的，但这里需要注意：

由于reactive返回的对象本质上已经是一个Proxy对象，所以通过…扩展符号展开的属性，是无法进行响应式的

也就是说，如果这么写：

return {...clickCountFn(), ...obj, btnClick1}

那么是无法实现的。

4、API - toRefs

正确的写法应该是：

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
  
	<!-- 无需obj.username，直接username即可 -->
  <p>姓名：{{username}}</p>
  <button @click="btnClick1">修改姓名</button>
</ template>

<script>
// 新增toRefs方法
import {ref, reactive, toRefs} from 'vue'
export default {
    setup(){
        let obj = reactive({
            username: "Jack"
        })
        let btnClick1 = () => {
            obj.username = "Mary"
        }
        // 通过toRefs方法
        let refObj = toRefs(obj);
      	// 通过...refObj将数据扩展
        return {...clickCountFn(), ...refObj, btnClick1}
    }
}

// 其他代码...
</script>

三、Provide与Inject（提供/注入）

1、Vue2写法

以往我们的父传子是通过props传的：

<!-- Father.vue父组件 -->
<template>
  <Child :num="num" />
</template>

<script>
import Child from './Child.vue'
export default {
    data(){
        return {
            num: 123
        }
    },
    components: {
        Child
    }
}
</script>

<!-- Child.vue子组件 -->
<template>
  <h2>父组件传过来的值：{{num}}</h2>
</template>

<script>
export default {
    props: ['num']
}
</script>

这个时候限制死了数据必须来自父组件，我们其实还有 Provide 和 Inject ：

<!-- Father.vue父组件 -->
<template>
  <Child />
</template>

<script>
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    provide: {
        num: 456
    }
}
</script>

<!-- Child.vue子组件 -->
<template>
  <h2>父组件传过来的值：{{num}}</h2>
</template>

<script>
export default {
    inject: ['num']
}
</script>

Provide/Inject 相比于 props 的好处在于：

如果组件嵌套较多，那么 props 需要一级一级往下传递，后期很难维护。Provide+Inject 相当于是跨级组件传值，比如孙子组件也想用上面这个 num 的值，就不用一级一级往下传，直接在孙子组件使用即可：

<!-- Sun.vue孙子组件 -->
<template>
  <h4>孙子组件：{{num}}</h4>
</template>

<script>
export default {
	  // 将Sun组件在Child组件中引入，即可实现跨级组件传值
    inject: ['num']
}
</script>

2、Vue3写法

vue3中的 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。

格式为：

// provide
import {provide} from 'vue' // 显式导入
export default {
  setup() {
    // 此处name必须是String类型，value则不限制
    provide(name, value)
  }
}

// inject
import {inject} from 'vue' // 显式导入
export default {
    setup(){
      	// name即为传过来的字段，第二个参数可选，可填写默认值
        const val = inject(name, defaultValue);
      	return {val}
    }
}

我们修改以上案例的代码：

<!-- Father.vue父组件 -->
<template>
  <Child />
</template>

<script>
import {provide} from 'vue' // 显式导入
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    setup(){
        provide('num', 789)
    }
}
</script>

<!-- Sun.vue孙子组件 -->
<template>
  <h4>孙子组件：{{mynum}}</h4>
</template>

<script>
import {inject} from 'vue' // 显式导入
export default {
    setup(){
        const mynum = inject('num');
        return {mynum}
    }
}
</script>

3、响应性

所谓的 Provide/Inject 响应性，其实就是把传递的值结合上文提及的 ref 或 reactive 一起使用：

<!-- Father.vue父组件 -->
<template>
  <Child />
  <button @click="changeNumFn">修改num</button>
</template>

<script>
import {provide, ref} from 'vue' // 显式导入
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    setup(){
      	// 使用ref来定义num的值
        const num = ref(123);

      	// 声明一个函数，专门用于修改num
        let changeNumFn = () => {
            num.value = 456;
        }

        provide('num', num)

      	// 返回这个函数
        return {changeNumFn}
    }
}
</script>

此时，当你点击按钮时，孙子组件接收到的 num 就会被修改了。

四、Teleport（传送门）

在vue2中，想要将子节点渲染到存在于父组件以外的 DOM 节点时，需要通过第三方库 portal-vue 去实现。而vue3中，Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

官方文档：《teleport》

举个最简单的例子：

我们在 index.html 中 #app 同级的地方新增一个 #test 元素：

<div id="app"></div>
<div id="test"></div>

由于vue的 main.js 中规定了打包出来的代码都放入 #app 中：

createApp(App).mount('#app')

因此，你现在没有办法将代码放入 #test 中。此时，我们可以使用传送门：

App.vue 中：

<template>
  <Home />
</template>

<script>
import Home from './components/Home.vue'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

Home.vue 中：

<template>
  <p>这段话是渲染在#app中的</p>
  <teleport to="#test">
      <p>这段话是渲染在#test中的--1</p>
  </teleport>
	<teleport to="#test">
      <p>这段话是渲染在#test中的--2</p>
  </teleport>
</template>

此时，你打开浏览器控制台，就可以看到第2、3个p标签已经被渲染到 #test 中。

备注：

1、标签身上都to属性，填写的是css选择器。

2、多个传送门书写时，会按照自上而下的顺序传送至另一个DOM元素。

五、Suspense（等待）

Suspense组件用于在等待某个异步组件解析时显示后备内容。

那我们什么时候需要使用异步组件呢？多了去了，比如：

  • 在页面加载之前显示加载动画
  • 显示占位符内容
  • 处理延迟加载的图像

那么，让我们看看 Suspense 怎么使用，我们先来提一个需求：

在等待组件获取数据并解析时显示“玩命加载中…”之类的内容

OK，我们来写一个 Article.vue 组件：

<template>
  <p>{{ content }}</p>
</template>

<script>
import { ref } from "vue";
export default{
  async setup() {
    let content = ref('内容')
    content.value = await new Promise((resolve,reject)=>{
        setTimeout(() => {
            // 3秒后修改content
            resolve("你好世界");
        }, 3000);
    })
    return {content}
  },
}
</script>

用个 Home.vue 组件来调用它：

<template
  <Suspense>
      <template #default>
          <Article></Article>
      </template>
      <template #fallback>
          <p>玩命加载中...</p>
      </template>
  </Suspense>
</template>

<script>
import Article from './Article.vue'
export default {
    components:{
        Article
    }
}
</script>

可以看出，<Suspense> 中，包含了两个template标签，#default 定义了我们要写入的内容， #fallback 定义了我们要预显示的内容。

⚠️ 注意：

作为template中的内容（即插槽），必须要有根元素。

六、Fragment（碎片）

vue2中，如果你创建一个Vue组件，那么它只能有一个根节点。这意味着不能创建这样的组件：

<template>
	<div>你好</div>
	<div>世界</div>
</template>

原因是代表任何Vue组件的Vue实例需要绑定到一个单一的DOM元素中。唯一可以创建一个具有多个DOM节点的组件的方法就是创建一个没有底层Vue实例的功能组件。

这情况同样存在于react，但react可以使用空标签 <></> 来包裹，或者是使用一个名为Fragment的虚拟元素：

class Columns extends React.Component {
  render() {
    return (
    	<React.Fragment>
      	<td>你好</td>
        <td>世界</td>
      </React.Fragment>
    )
  }
}

尽管Fragment看起来像一个普通的DOM元素，但它是虚拟的，根本不会在DOM树中呈现。目前你可以在Vue 2中使用vue-fragments库来使用Fragments，而在Vue 3中，你直接使用就行了，无需引入任何库。

七、TreeShaking（消除未使用代码）

TreeShaking 是一个术语，指的是在打包构建过程中移除没有被引用到的代码，这些代码可以成为 dead code。这个概念最早在基于 ES6 的打包工具 Rollup 中提出，后来被引入到 webpack 中。TreeShaking 比较依赖于 ES6 模块系统的静态结构特性，比如 import 和 export。

文档参考：https://vue3js.cn/docs/zh/guide/migration/global-api-treeshaking.html#_2-x-%E8%AF%AD%E6%B3%95

举个例子：

vue2中我们常使用 Vue.nextTick(()=>{}) 来预操作DOM，但有时候我们不用这个 nextTick ，比如改用别的方式来代替（如setTimeout），那么项目打包时，vue 全局的 nextTick 就成为一个多余的代码，从而使你的项目打包体积变大。

在vue3中，官方团队重构了所有全局 API 的组织方式，让所有的 API 都支持了 TreeShaking。所以vue3中如果还想使用全局的 nextTick ，就需要引入：

import { nextTick } from 'vue';
 
nextTick(() => {
  // 和 DOM 有关的一些操作
});

如果你在 Vue 3 中不引入而直接调用 Vue.nextTick() ，就会得到一个报错：undefined is not a function。

官方也给出了Vue 2.x 中的受此更改影响的全局 API：

  • Vue.nextTick
  • Vue.observable (用 Vue.reactive 替换)
  • Vue.version
  • Vue.compile (仅全构建)
  • Vue.set (仅兼容构建)
  • Vue.delete (仅兼容构建)

八、Performance（性能）

vue3.0相对于vue2.0来说性能快1.2到1.5倍，主要原因如下：

1、diff方法优化

  • Vue2 中的虚拟dom是进行全量的对比
  • Vue3 新增了静态标记（PatchFlag），只比对带有 PF 的节点，并且通过 Flag 的信息得知 当前节点要比对的具体内容。

2、静态提升

  • Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染
  • Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可

3、cacheHandlers 事件侦听器缓存

  • 默认情况下onClick会被视为动态绑定, 所以每次都会去追踪它的变化
  • 但是因为是同一个函数，所以没有追踪变化, 直接缓存起来复用即可

4、ssr渲染

  • 当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面， 即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。
  • 当静态内容大到一定量级时候，会用_createStaticVNode方法在客户端去生成一个static node， 这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

九、Setup的生命周期

组合式API需要在setup中使用，setup中含有的生命钩子与vue的大体一致：

具体参考：《setup生命周期钩子》

十、TypeScript支持

vue3新增了对TS语法的支持。

2024-01-16

转载自CSDN-专业IT技术社区

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/lovechris00/article/details/131794636

评论

赞0

评论列表

微信小程序
QQ小程序

关于作者

点赞数：0
关注数：0
粉丝：0
文章：0
关注标签：0
加入于：--