Vue3从入门到精通(一)|观点

2023-06-07 12:44:47 来源:博客园
Vue3简介

Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于:


(资料图)

更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。

更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更快。

更好的类型支持:Vue3对TypeScript的支持更加友好,提供了更好的类型支持。

更好的组合式API:Vue3提供了更好的组合式API,使得组件的复用和维护更加方便。

更好的Tree-shaking支持:Vue3对Tree-shaking的支持更加完善,可以更好地优化打包后的代码。

总之,Vue3是一个更加优秀的版本,可以帮助开发者更好地构建高性能、易维护的Web应用程序。

Vue API风格

Vue API风格主要有两种:对象风格和函数风格。

对象风格

对象风格是Vue 2.x版本的API风格,它将Vue实例作为一个对象,通过对象的属性和方法来操作Vue实例。例如:

var vm = new Vue({  el: "#app",  data: {    message: "Hello Vue!"  },  methods: {    showMessage: function () {      alert(this.message)    }  }})​vm.message = "Hello World!"vm.showMessage()

在上面的代码中,我们使用对象风格的API来创建Vue实例,设置数据和方法,并通过vm对象来操作Vue实例。

函数风格

函数风格是Vue 3.x版本的API风格,它将Vue实例作为一个函数,通过函数的参数和返回值来操作Vue实例。例如:

import { createApp } from "vue"​const app = createApp({  data() {    return {      message: "Hello Vue!"    }  },  methods: {    showMessage() {      alert(this.message)    }  }})​const vm = app.mount("#app")​vm.message = "Hello World!"vm.showMessage()

在上面的代码中,我们使用函数风格的API来创建Vue实例,设置数据和方法,并通过app.mount()方法来挂载Vue实例,然后通过vm对象来操作Vue实例。

总的来说,函数风格的API更加简洁和易于理解,而且更加符合现代JavaScript的编程风格。因此,Vue 3.x版本的API采用了函数风格。

Vue3开发前的准备

在开始使用Vue3进行开发之前,需要进行以下准备工作:

安装Node.js和npm

Vue3需要Node.js和npm的支持,因此需要先安装它们。可以在Node.js官网下载对应版本的安装包进行安装。

安装Vue CLI

Vue CLI是Vue.js官方提供的脚手架工具,可以帮助我们快速创建Vue项目。可以使用以下命令全局安装Vue CLI:

npm install -g @vue/cli

选择编辑器

选择一个适合自己的编辑器进行开发,推荐使用Visual Studio Code,它有很多Vue相关的插件和工具。

学习Vue基础知识

在使用Vue3进行开发之前,需要先掌握Vue的基础知识,包括Vue的核心概念、Vue组件、Vue指令、Vue生命周期等。

学习TypeScript

Vue3使用TypeScript进行开发,因此需要先学习TypeScript的基础知识,包括TypeScript的数据类型、接口、类、泛型等。

总的来说,学习Vue3需要一定的前置知识,需要掌握Node.js、npm、Vue CLI、编辑器、Vue基础知识和TypeScript等知识点。

vue3 项目目录结构

Vue3项目的目录结构与Vue2有些不同,主要是因为Vue3使用了新的模块化系统和TypeScript语言。

以下是一个Vue3项目的典型目录结构:

├── public│   ├── index.html│   └── favicon.ico├── src│   ├── assets│   ├── components│   ├── router│   ├── store│   ├── utils│   ├── views│   ├── App.vue│   └── main.ts├── tests├── node_modules├── package.json├── tsconfig.json└── README.md

public:存放静态资源文件,如HTML文件、图片、图标等。

src:存放源代码文件。

assets:存放静态资源文件,如CSS、图片、字体等。

components:存放Vue组件文件。

router:存放Vue Router路由文件。

store:存放Vuex状态管理文件。

utils:存放工具函数文件。

views:存放页面组件文件。

App.vue:根组件文件。

main.ts:入口文件,包括Vue实例的创建和挂载等。

tests:存放测试文件。

node_modules:存放项目依赖的第三方库。

package.json:存放项目的配置信息和依赖库信息。

tsconfig.json:存放TypeScript编译器的配置信息。

README.md:项目说明文件。

总的来说,Vue3项目的目录结构与Vue2有些不同,但是基本的结构还是相似的,包括静态资源文件、源代码文件、测试文件、依赖库信息等。

vue3 模板语法

Vue3的模板语法与Vue2的模板语法基本相同,但也有一些变化。以下是Vue3的模板语法:

插值表达式

Vue3的插值表达式使用{{}},例如:

{{ message }}

指令

Vue3的指令使用v-前缀,例如:

常用的指令包括:

v-if:条件渲染。

v-for:循环渲染。

v-bind:绑定属性。

v-on:绑定事件。

v-model:双向绑定。

计算属性

Vue3的计算属性使用computed关键字,例如:

​<script>export default {  data() {    return {      message: "Hello World"    }  },  computed: {    reversedMessage() {      return this.message.split("").reverse().join("")    }  }}</script>

监听器

Vue3的监听器使用watch关键字,例如:

​<script>export default {  data() {    return {      message: "Hello World"    }  },  watch: {    message(newValue, oldValue) {      console.log(newValue, oldValue)    }  }}</script>

生命周期

Vue3的生命周期与Vue2基本相同,但是使用了新的API。例如:

​<script>import { onMounted, onUpdated, onUnmounted } from "vue"​export default {  data() {    return {      message: "Hello World"    }  },  setup() {    onMounted(() => {      console.log("mounted")    })    onUpdated(() => {      console.log("updated")    })    onUnmounted(() => {      console.log("unmounted")    })  }}</script>

总的来说,Vue3的模板语法与Vue2基本相同,但是使用了新的API,包括computedwatch和生命周期等。

vue3 属性绑定

在Vue3中,属性绑定使用v-bind:或简写的:,例如:

​<script>export default {  data() {    return {      className: "red"    }  }}</script>

上面的代码中,:class绑定了一个名为className的data属性,这个属性的值为"red",所以

元素会被添加一个class属性,值为"red"

除了绑定data属性,还可以绑定表达式、计算属性、甚至是方法的返回值。例如:

​<script>export default {  data() {    return {      isActive: true    }  },  methods: {    getClass() {      return this.isActive ? "active" : "inactive"    }  }}</script>

上面的代码中,:class绑定了一个三元表达式和一个方法的返回值,这两个值都可以被作为class属性的值。

需要注意的是,在Vue3中,绑定属性时,可以使用v-bind:或简写的:,但是在绑定事件时,必须使用v-on:或简写的@。例如:

​<script>export default {  methods: {    handleClick() {      console.log("clicked")    }  }}</script>

上面的代码中,@click绑定了一个handleClick方法,这个方法会在按钮被点击时被调用。

vue3 条件渲染

Vue3中的条件渲染和Vue2类似,使用v-ifv-else指令来控制元素的显示和隐藏。

示例代码如下:

​<script>export default {  data() {    return {      show: true    }  }}</script>

上面的代码中,根据show的值来决定显示哪个

元素。

除了v-ifv-else,还有v-else-if可以用来实现多个条件的判断。

示例代码如下:

​<script>export default {  data() {    return {      type: "B"    }  }}</script>

上面的代码中,根据type的值来决定显示哪个

元素。

需要注意的是,v-if是惰性的,只有当条件为真时才会渲染元素,否则不会渲染。而v-show则是直接控制元素的显示和隐藏,不管条件是否为真,元素都会被渲染,只是样式被设置为display: none

vue3 列表渲染

Vue3中的列表渲染和Vue2类似,使用v-for指令来遍历数组或对象,并生成对应的元素。

示例代码如下:

​<script>export default {  data() {    return {      list: ["item1", "item2", "item3"]    }  }}</script>

上面的代码中,使用v-for指令遍历list数组,并生成对应的

  • 元素。

    除了数组,也可以遍历对象,例如:

    ​<script>export default {  data() {    return {      obj: {        key1: "value1",        key2: "value2",        key3: "value3"      }    }  }}</script>

    上面的代码中,使用v-for指令遍历obj对象,并生成对应的

  • 元素。

    需要注意的是,每个v-for都需要指定一个唯一的key属性,用来标识每个元素的唯一性,以便在更新时能够正确地识别每个元素。

    vue3 通过key管理状态

    在Vue3中,通过key属性可以管理组件或元素的状态。当一个组件或元素的key属性发生变化时,Vue会认为它是一个不同的组件或元素,从而重新渲染它。

    示例代码如下:

    ​<script>export default {  data() {    return {      show: true    }  },  methods: {    toggle() {      this.show = !this.show    }  }}</script>

    上面的代码中,使用key属性来管理

    元素的状态。当show变量的值发生变化时,
    元素的key属性也会发生变化,从而重新渲染
    元素。

    需要注意的是,key属性的值必须是唯一的,不能重复。如果重复了,会导致Vue无法正确地识别每个组件或元素的状态,从而导致渲染错误。

    vue3 事件处理

    在Vue3中,事件处理的方式与Vue2相似,可以使用@v-on指令来绑定事件。不同之处在于,Vue3中取消了.sync修饰符,同时提供了新的修饰符和事件API。

    绑定事件

    可以使用@v-on指令来绑定事件,语法与Vue2相同。示例如下:

    <script>export default {  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

    上面的代码中,使用@click指令来绑定handleClick方法,当按钮被点击时,会触发handleClick方法。

    事件修饰符

    Vue3中提供了新的事件修饰符,包括.stop.prevent.capture.self.once.passive。示例如下:

    <script>export default {  methods: {    handleClick() {      console.log("Div clicked!")    }  }}</script>

    上面的代码中,使用.stop修饰符来阻止事件冒泡,当div元素被点击时,不会触发其父元素的点击事件。

    动态事件名

    在Vue3中,可以使用方括号来绑定动态事件名。示例如下:

    ​<script>export default {  data() {    return {      eventName: "click"    }  },  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

    上面的代码中,使用@[eventName]指令来绑定动态事件名,事件名为eventName的值。

    自定义事件

    在Vue3中,可以使用createApp方法的provideinject选项来实现自定义事件的传递。示例如下:

    // App.vue​<script>import { provide } from "vue"import EventBus from "./EventBus"​export default {  setup() {    provide("eventBus", EventBus)  },  methods: {    handleClick() {      EventBus.emit("customEvent", "Hello, Vue3!")    }  }}</script>​// EventBus.jsimport mitt from "mitt"​const EventBus = mitt()​export default EventBus​// ChildComponent.vue​<script>import { inject } from "vue"​export default {  setup() {    const eventBus = inject("eventBus")    const message = ref("")​    eventBus.on("customEvent", (data) => {      message.value = data    })​    return {      message    }  }}</script>

    上面的代码中,使用provide方法将事件总线对象EventBus注入到根组件中,然后在子组件中使用inject方法获取事件总线对象,并通过on方法监听自定义事件customEvent,当事件触发时,更新message的值。

    vue3 事件传参

    在Vue3中,事件传参的方式和Vue2基本相同,可以使用$event来传递事件对象,也可以使用函数来传递自定义参数。

    示例代码如下:

    ​<script>export default {  methods: {    handleClick(event, arg) {      console.log(event) // 输出事件对象      console.log(arg) // 输出自定义参数    }  }}</script>

    上面的代码中,使用$event来传递事件对象,使用"参数"来传递自定义参数。

    另外,如果需要在事件处理函数中访问组件实例,可以使用箭头函数来绑定作用域,例如:

    ​<script>export default {  methods: {    handleClick(arg) {      console.log(this) // 输出组件实例      console.log(arg) // 输出自定义参数    }  }}</script>

    上面的代码中,使用箭头函数来绑定作用域,从而在事件处理函数中访问组件实例。

    vue3 事件修饰符

    在Vue3中,事件修饰符的使用方式和Vue2基本相同,可以通过在事件名后面添加.修饰符的方式来使用事件修饰符。

    常用的事件修饰符包括:

    .stop:阻止事件冒泡

    .prevent:阻止事件默认行为

    .capture:使用事件捕获模式

    .self:只在事件目标自身触发时触发事件

    .once:只触发一次事件

    .passive:告诉浏览器该事件不会调用preventDefault()方法,可以优化页面滚动性能

    示例代码如下:

    ​<script>export default {  methods: {    handleClick() {      console.log("点击事件")    },    handleScroll() {      console.log("滚动事件")    }  }}</script>

    上面的代码中,使用不同的事件修饰符来控制事件的行为。例如,使用.stop修饰符来阻止事件冒泡,使用.prevent修饰符来阻止事件默认行为,使用.capture修饰符来使用事件捕获模式,使用.self修饰符来只在事件目标自身触发时触发事件,使用.once修饰符来只触发一次事件,使用.passive修饰符来告诉浏览器该事件不会调用preventDefault()方法,可以优化页面滚动性能。

    vue3 计算属性

    在Vue3中,计算属性的使用方式和Vue2基本相同,可以通过在组件的computed选项中定义计算属性来计算和缓存值。

    示例代码如下:

    ​<script>export default {  data() {    return {      price: 10,      count: 2    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return this.price * this.count    }  }}</script>

    上面的代码中,使用computed选项来定义计算属性quantitytotalPrice,分别计算商品数量和商品总价。

    在模板中,可以像访问普通属性一样访问计算属性,例如{{ quantity }}{{ totalPrice }}

    需要注意的是,在Vue3中,计算属性的返回值可以是一个函数,这样可以实现动态计算属性。示例代码如下:

    ​<script>export default {  data() {    return {      price: 10,      count: 2,      discount: 0.8    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return () => this.price * this.count * this.discount    }  }}</script>

    上面的代码中,计算属性totalPrice返回一个函数,这个函数会动态计算商品总价,考虑到折扣可能会变化,因此需要动态计算商品总价。

    vue3 class绑定

    在Vue3中,可以使用v-bind:class指令来绑定一个对象或数组来动态地设置一个元素的class属性。

    下面是使用对象语法绑定class的示例代码:

    ​<script>export default {  data() {    return {      isActive: true,      hasError: false    }  }}</script>

    上面的代码中,使用:class指令来绑定一个对象,这个对象的属性名是class名称,属性值是一个布尔值,表示是否应用这个class。在这个示例中,如果isActivetrue,则会应用active这个class,如果hasErrortrue,则会应用text-danger这个class。

    下面是使用数组语法绑定class的示例代码:

    ​<script>export default {  data() {    return {      isActive: true,      errorClass: "text-danger"    }  }}</script>

    上面的代码中,使用:class指令来绑定一个数组,这个数组的元素可以是字符串或对象。如果数组元素是字符串,则表示应用这个class;如果数组元素是对象,则表示应用这个对象中的class。

    在这个示例中,如果isActivetrue,则会应用active这个class,如果errorClasstext-danger,则会应用text-danger这个class。

    需要注意的是,在Vue3中,可以使用动态组件来动态渲染不同的组件,这个功能可以使用元素和is特性来实现。示例代码如下:

    ​<script>import ComponentA from "./ComponentA.vue"import ComponentB from "./ComponentB.vue"​export default {  components: {    ComponentA,    ComponentB  },  data() {    return {      currentComponent: "ComponentA"    }  }}</script>

    上面的代码中,使用元素和is特性来动态渲染不同的组件。在这个示例中,点击ComponentA按钮会渲染ComponentA组件,点击ComponentB按钮会渲染ComponentB组件。

    vue3 style 绑定

    在Vue3中,可以使用v-bind指令或简写的:来动态绑定样式。

    绑定单个样式

    可以使用对象语法来绑定单个样式,对象的属性名为样式名,属性值为样式值。示例如下:

    ​<script>export default {  data() {    return {      textColor: "red"    }  }}</script>

    上面的代码中,使用:style指令来绑定color样式,样式的值为textColor的值。

    绑定多个样式

    可以使用对象语法来绑定多个样式,对象的属性名为样式名,属性值为样式值。示例如下:

    ​<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  }}</script>

    上面的代码中,使用:style指令来绑定colorfontSize两个样式,样式的值分别为textColorfontSize的值。

    绑定样式数组

    可以使用数组语法来绑定多个样式,数组中的元素为样式对象。示例如下:

    ​<script>export default {  data() {    return {      baseStyles: {        color: "red",        fontSize: "16px"      },      customStyles: {        fontWeight: "bold"      }    }  }}</script>

    上面的代码中,使用:style指令来绑定baseStylescustomStyles两个样式对象,样式的值为两个对象的合并结果。

    绑定样式对象

    可以使用计算属性来动态绑定样式对象。示例如下:

    ​<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  },  computed: {    computedStyles() {      return {        color: this.textColor,        fontSize: this.fontSize + "px"      }    }  }}</script>

    上面的代码中,使用计算属性computedStyles来动态绑定样式对象,样式的值为计算属性的返回值。

    关键词:

    相关新闻