「前端Vue学习系列」二、Vue基础篇

言

Hi，大家好，我是希留。

上篇文章带大家认识了Vue，以及初始化了一个Vue工程的项目。今天继续介绍一下Vue的一些基础用法。

一、Vue项目的目录结构
二、基本语法

1.基本数据渲染和指令
2.双向数据绑定
3.修饰符
4.缩写
5.计算属性
6.侦听属性
7.条件渲染
8.列表渲染
9.过滤器

一、Vue项目的目录结构

使用开发工具（idea、webstorm、vscode…）打开Vue项目。由于后端用idea的比较多，这里以idea为例（需要安装Vue.js插件）,打开后目录结构如下：

如上图所示，Vue的目录结构主要由以下部分组成：

my-vue-project
    ├--- build
    ├--- config
    ├--- node_modules
    └--- src
         ├--- assets
         └--- components
         ├--- router
         └--- App.vue
         ├--- main.js
    ├--- static
    └--- package.json

build ：构建相关，用来存放项目构建脚本，对项目进行编译打包
config ：配置相关，用来存放基本的配置文件
node_modules ：用来存放的是项目的所有依赖
src ：存放项目的源码
assets ：主题字体等静态资源
components ：全局公用组件
router ：路由
App.vue ：入口页面
main.js ：入口加载组件初始化等
static ：第三方不打包资源
package.json ：定义了项目的所有依赖，包括开发时依赖和发布时依赖

二、基本语法

1、基本数据渲染和指令

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

代码如下：

<template>
  <div class="hello">
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据-->
    <h1 v-bind:title="message">
      {{content}}
    </h1>

    <!-- v-bind 指令的简写形式：冒号（:） -->
    <h1 :title="message">
      {{content}}
    </h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content: '我是标题',
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  }
}
</script>

运行项目，浏览器打开地址，可看到页面正常渲染出来数据。

2、双向数据绑定

双向数据绑定和单向数据绑定；

使用 v-model 进行双向数据绑定：

 <template>
  <div class="hello">
	...
		
    !-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="searchMap.keyWord">

    <!-- v-model 可以进行双向的数据绑定  -->
    <input type="text" v-model="searchMap.keyWord">

    <p>您要查询的是：{{searchMap.keyWord}}</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      searchMap: {
        keyWord: '希留'
      }
    }
  }
}
</script>

使用v-bind绑定的数据是单向的，并不会随着输入值的改变而改变

使用 v-model 指令才能把数据双向绑定

3、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()方法
(即阻止事件原本的默认行为)

示例代码如下：

<template>
  <div class="hello">
	...
		
    <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()方法
     （该方法表示阻止表单提交的默认行为） -->
    <form action="save" v-on:submit.prevent="onSubmit">
      <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
      </label>
    </form>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      user: {}
    }
  },
  methods: {
    onSubmit() {
      if (this.user.username) {
        console.log('提交表单')
      } else {
        alert('请输入用户名')
      }
    }
  }
}
</script>

当在方法上加了.preven修饰符后，点击保存只会执行onSubmit方法。若没加，则会先执行onSubmit方法在执行action里的方法。

4、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写，它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

5、计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

所以Vue提供了计算属性。对于任何复杂逻辑，你都应当使用计算属性。且计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

示例代码如下：

<template>
  <div class="hello">
	...
	<p>原始值: "{{ message }}"</p>
    <!-- 1、插值数据绑定中使用表达式 -->
    <p>反转消息: {{ message.split('').reverse().join('') }}</p>
    <!-- 2、使用计算属性 -->
    <p>反转消息: "{{ reversedMessage }}"</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自来水来自海上 haha'
    }
  },
  computed: {
      reversedMessage () {
          return this.message.split('').reverse().join('')
      }
  }
}
</script>

6、侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

示例代码如下：

<template>
  <div class="hello">
	...
	<p>
      Ask a yes/no question:
      <input v-model="question">
      <button @click="getAnswer()">提问</button>
    </p>
    <p>{{ answer }}</p>
  </div>
</template>
  

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自来水来自海上 haha'
    }
  },
  methods: {

    getAnswer() {
      var vm=this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer=_.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer='网找不到API接口. ' + error
        })
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer='等待您停止输入...'
      this.getAnswer()
    }
  }
}
</script>

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

7、条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if 是一个指令，所以必须将它添加到一个元素上。v-else-if，充当 v-if 的“else-if 块”，可以连续使用；
v-else 指令来表示 v-if 的“else 块”，必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。v-show 不支持元素，也不支持 v-else。

两者对比：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute，建议尽可能在使用 v-for 时提供 key attribute，因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。

示例代码如下：

<!-- 1、遍历数据列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
      ]
    }
  },

}
</script>

9、过滤器

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

```javascript
<!-- 1、遍历数据列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
        <!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
        <td>{{item.gender | genderFilter}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 ,gender: 1},
        { id: 2, username: 'peter', age: 28 ,gender: 1},
        { id: 3, username: 'andy', age: 38 ,gender: 0}
      ]
    }
  },
  // filters 定义局部过滤器，只可以在当前vue实例中使用
  filters: {
      genderFilter(gender) {
        return gender===1 ? '男' : '女'
      }
  }
}
</script>

结语

好了，以上就是今天要讲的内容，本文简单介绍了Vue的基础使用，相信大家对Vue有了进一步的认识了，赶快动手操作起来吧，gogogo。

然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

一、安装并创建实例

安装最新版本的 vue-router

npm install vue-router@4 

或

yarn add vue-router@4

安装完成之后，可以在 package.json 文件查看vue-router的版本

"dependencies": {
 "vue": "^3.2.16",
 "vue-router": "4"
},

新建 router 文件夹，新建 index.js文件：

import { createRouter,createWebHashHistory } from "vue-router";

const routes=[
 {
  path:'',
  component:()=>import("../views/login/index.vue")
 },
 {
  path:'/home',
  component:()=>import("../views/home/index.vue")
 }
]

const router=createRouter({
 history:createWebHashHistory('/'),
 routes
})

export default router

然后在main.js 中引入 router 。

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"

const app=createApp(App)
app.use(router)
app.mount('#app')

注意：之前 component 引入组件的时候，后边可以省略 .vue 后缀，但在 vue-router 4这不能省略后缀，否则就报错了。

二、vue-router4 新特性

2.1、动态路由

addRoute 动态添加路由时，有两种情况，分别为：

//动态添加路由--默认添加到根
router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue")
})

//动态添加子路由
router.addRoute('my',{
 path:'/info',
 component:()=>import("../views/my/info.vue")
})

添加子路由时，第一个属性值是父级路由的 name 属性值。

2.2、与 composition 组合

在事件中获取 router ，进行路由跳转等操作。

<template>
  <button @click="backToHome">跳转到首页</button>
</template>

<script>
import { useRouter } from "vue-router"
export default {
 setup(){
  const router=useRouter()
  return{
   backToHome(){
    router.push("/")
   },
  }
 }
}
</script>

通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的案例：

<template>
  <div>监听路由变化</div>
</template>

<script>
import { useRouter,useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"
export default {
 setup(){
  const route=useRoute()
  //route时响应式对象，可监控变化
  watch(()=>route.query,query=>{
   console.log('最新的',query)
  })
 }
}
</script>

三、导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航，有很多种方式植入路由导航中：全局的、单个路由独享的或者组件级的。

3.1、全局守卫

router.beforeEach((to,from,next)=>{
 console.log('全局前置守卫');
})
router.afterEach((to,from)=>{
 console.log('全局后置钩子');
})

与之前的使用都一样，没有任何变化。

3.2、路由独享守卫

router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue"),
 beforeEnter:(to,from)=>{
  console.log('路由独享守卫');
 }
})

3.3、组件内的守卫

组件内的守卫与之前使用不同，vue-router4中，需要从vue-router内引入需要的插件。

<script>
import {  onBeforeRouteLeave } from "vue-router"
export default {
 setup(){
 onnBeforeRouteLeave((to,from)=>{
  const answer=window.confirm('是否确认离开')
  if(answer){
   console.log('不离开');
   return false
  }
  })
 }
}
</script>

四、vue-router4 发生破坏性变化

4.1、实例创建方式

//以前创建方式
const router=new VueRouter({
 
})
new Vue({
 router,
 render:h=>h(App)
}).$mount("#app")

//vue-router4创建方式
import { createRouter } from "vue-router"
const router=createRouter({

})
createApp(App).use(router).mount("#app")

4.2、模式声明方式改变

//之前
const router=new VueRouter({
 mode:"hash"
})

//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
 history:createWebHashHistory()
})

之前的mode替换成了 history ，它的选项变化分别为：

history -> createWebHistory
hash -> createWebHashHistory
abstract -> createMemoryHistory

4.3、base属性被合并

base 选项被移至 createWebHistory 中。

//之前
const router=new VueRouter({
 base:"/"
})

//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
 history:createWebHashHistory('/')
})

4.4、通配符 * 被取消

//之前
{
 path:'*',
 component:()=>import("../components/NotFound.vue")
}

//vue-router 4
{
 path:'/:pathMatch(.*)*',
 component:()=>import("../components/NotFound.vue")
}
//是一个正则表达式

4.5、isReady() 替代 onReady

//之前
router.onReady(onSuccess,onError)//成功和失败回调

//vue-router 4
router.isReady().then(()=>{
 //成功
}).catch(err=>{
 //失败
})

4.6、scrollBehavior 变化

const router=createRouter({
 scrollBehavior(to, from, savedPosition) {
  // 始终滚动到顶部
  return { top: 0, left:0 }
 },
})
//之前使用的{ x:0, y:0 } 替换成了 { top: 0, left:0 }

4.7、keep-alive 和 transition 必须用在 router-view 内部

//之前
<keep-alive>
 <router-view />
</keep-alive>

//vue-router 4
<router-view v-slot="{component}">
 <keep-alive>
  <component :is="component" />
 </keep-alive>
</router-view>

4.8、router-link 移除了一部分属性

移除 append 属性

//之前
<router-link to="child" append >跳转<router-link>

//vue-router 4
<router-link :to="append( $route.path , 'child' )" append >跳转<router-link>

tag 被移除

//之前
<router-link to="/" tag="span">跳转</router-link>

//vue-router 4
<router-link to="/" custom>
 <span>跳转</span>  
</router-link>

event 被移除

4.9、route 的 parent 属性被移除

4.10、pathToRegexpOptions选项被移除，其他内容替换

4.11、routes选项是必填项

4.12、跳转不存在的命名路由报错

之前跳转到不存在的路由，页面是空的，会重定向根路径，这是不合理的，所以vue3报错了。

4.13、缺少必填参数会抛出异常

4.14、命名子路由如果 path 为空的时候，不再追加 /

之前生成的 url 会自动追加一个 / ，如："/dash/"。副作用：给设置了 redirect 选项的子路由带来副作用。

识星球：写代码那些事
----
如果你有收获｜欢迎｜点赞｜关注｜转发
----
这里会定期更新｜大厂的开发｜架构｜方案设计
这里也会更新｜如何摸鱼｜抓虾

欢迎来到写代码那些事！在现代Web开发领域，Vue.js已经成为最受欢迎的JavaScript框架之一。Vue3作为Vue.js的最新版本，引入了许多强大的特性和改进，使得构建现代化的Web应用更加简单、高效。本教程将带您深入了解Vue3的核心概念、特性和最佳实践，帮助您快速上手并构建出色的Web应用。

目录：

前言：为什么选择Vue3？
Vue3核心概念与基本语法
组件化开发与单文件组件
响应式数据与状态管理
Vue Router：路由管理
Vue3生命周期与Hooks函数
总结

1. 前言：为什么选择Vue3？

Vue3作为Vue.js的最新版本，不仅保留了Vue.js的优点，还引入了许多性能优化和新特性，如编译优化、Composition API等。这些改进使得Vue3在开发大型Web应用时更具竞争力。

1. 编译优化： Vue3引入了一种新的编译器，称为“基于Proxy的编译器”，它能够生成更高效、更精简的渲染函数代码。这意味着在运行时，Vue3可以更快地解析和渲染模板，从而提升应用的性能。

2. Composition API： Vue3引入了Composition API，这是一种全新的API风格，使得组件逻辑更加清晰、可复用。相比于Vue2的Options API，Composition API允许开发者更自由地组织组件代码，将相关逻辑聚集在一起，提高了代码的可维护性和可测试性。

3. 更好的TypeScript支持： Vue3对TypeScript的支持更加友好。通过Composition API和TypeScript结合使用，开发者可以在编码过程中获得更好的类型提示和错误检查，减少潜在的bug。

4. 更小的包体积： Vue3优化了包的体积，使得下载和加载速度更快。这对于提升用户体验和移动端应用尤为重要。

5. 更快的渲染性能： Vue3在渲染性能方面进行了优化，比Vue2更快地更新视图，从而提升了应用的响应速度。

6. 改进的响应式系统： Vue3的响应式系统使用了Proxy代理对象，使得数据的响应式追踪更精确，减少了不必要的渲染。

7. Teleport组件： Vue3引入了Teleport组件，可以轻松实现Portal功能，将组件的内容渲染到DOM的不同位置，方便处理弹出层等场景。

8. 兼容Vue2： Vue3在设计时考虑到了与Vue2的兼容性，因此可以逐步升级现有的Vue2项目到Vue3，而不需要全部重写代码。

2. Vue3核心概念与基本语法

学习Vue3的核心概念，包括Vue实例、模板语法、指令等。通过示例代码，演示如何创建一个简单的Vue3应用。

步骤 1：引入Vue3

首先，你需要在项目中引入Vue3。你可以通过以下方式获取Vue3的CDN链接：

<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>

步骤 2：创建Vue实例

在HTML文件中，我们创建一个容器元素，用于渲染Vue应用。然后，你可以在JavaScript文件中创建Vue实例，并将其与容器元素关联起来。

<!DOCTYPE html>
<html>
<head>
  <title>Vue3 Demo</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

// app.js
const app=Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

在这个示例中，我们使用Vue.createApp创建了一个Vue应用实例，并将其关联到id为app的HTML元素上。data选项定义了我们需要在应用中使用的数据，这里是一个简单的message。

步骤 3：使用模板语法

Vue的模板语法允许我们将数据绑定到DOM元素上，实现动态更新。

在上面的示例中，我们在<div id="app">内部使用了双大括号{{ }}来绑定数据。这样，当message数据发生变化时，页面上的文本也会随之更新。

<div id="app">
  {{ message }}
</div>

步骤 4：运行应用

将上述HTML和JavaScript代码保存为相应的文件，然后在浏览器中打开HTML文件。你将看到页面上显示着"Hello, Vue3!"，这是由Vue实例中的message数据驱动的。

这只是一个简单的Vue3应用示例，但它涵盖了Vue的核心概念：创建Vue实例、使用模板语法绑定数据。通过这个基础示例，你已经迈出了学习Vue3的第一步。随着深入学习，你将学会更多关于指令、组件、状态管理等方面的知识，从而能够构建更复杂、更强大的Vue应用。

3. 组件化开发与单文件组件

了解Vue3中组件化开发的重要性，学习如何创建可复用的组件。介绍单文件组件的概念，以及如何使用Vue CLI来构建项目。

为什么组件化很重要？

组件化开发有许多优势：

可复用性： 组件可以在不同的地方被多次使用，避免了重复编写相似的代码，提高了代码的可复用性。
可维护性： 将界面拆分成小的组件，使得每个组件的逻辑相对独立，易于维护和测试。
可扩展性： 新的功能可以通过添加新的组件来实现，而不会影响到其他组件。
团队协作： 不同的团队成员可以同时开发不同的组件，降低了开发的耦合度。

Vue3中的组件

在Vue3中，组件可以通过单文件组件的方式创建，这是一种将模板、脚本和样式封装在一个文件中的方式。单文件组件的后缀通常是.vue，它包括三个部分：

模板（Template）： 定义了组件的外观和结构，使用Vue的模板语法来描述。
脚本（Script）： 包含组件的行为逻辑，可以访问组件的数据和方法。
样式（Style）： 定义了组件的样式，可以使用CSS或其他预处理器。

使用Vue CLI构建项目

Vue CLI是一个用于快速构建Vue项目的脚手架工具。它提供了项目初始化、开发服务器、打包等一系列功能，让你能够专注于开发而不用搭建开发环境。

以下是使用Vue CLI构建项目的简要步骤：

安装Vue CLI：

在命令行中运行以下命令来全局安装Vue CLI。

npm install -g @vue/cli

创建项目： 运行以下命令来创建一个新的Vue项目。

vue create my-project

在这里，my-project是你项目的名称，你可以根据实际情况进行替换。

启动开发服务器： 进入项目目录，运行以下命令来启动开发服务器。

cd my-project npm run serve

这将启动一个本地开发服务器，你可以在浏览器中访问项目。

创建组件：在项目中创建单文件组件，将模板、脚本和样式写在同一个文件中。

<template>
  <div>
    <!-- 模板内容 -->
  </div>
</template>

<script>
export default {
  // 脚本内容
}
</script>

<style>
  /* 样式内容 */
</style>

使用Vue CLI构建项目，配合单文件组件的方式，可以让你更加高效地开发Vue应用。同时，这也符合现代前端开发中组件化的趋势，让你的代码更具可维护性和扩展性。

4. 响应式数据与状态管理

深入探讨Vue3的响应式数据原理，以及如何使用Vuex进行全局状态管理。示例代码将带您一步步构建一个简单的任务管理应用。

Vue3的响应式数据原理

Vue3采用了Proxy代理对象来实现响应式数据。当你访问代理对象的属性时，会自动进行依赖收集，当属性被修改时，会自动触发依赖更新。

下面是一个简单的示例，演示了如何在Vue3中创建响应式数据：

import { reactive, readonly } from 'vue';

const state=reactive({
  count: 0,
});

// 访问属性，触发依赖收集
console.log(state.count);

// 修改属性，触发依赖更新
state.count++;

// 使用readonly创建只读的响应式数据
const readOnlyState=readonly(state);

使用Vuex进行全局状态管理

Vuex是Vue官方提供的状态管理库，用于管理全局的状态。它可以帮助你在应用中集中管理和共享状态，使得状态变化更可预测、可追踪。

以下是一个简单的步骤，演示如何使用Vuex构建一个简单的任务管理应用：

安装Vuex： 在命令行中运行以下命令来安装Vuex。

npm install vuex

创建Vuex Store： 在项目中创建一个Vuex store，定义应用的状态和相关操作。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      tasks: [],
    };
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    },
  },
});

在应用中使用Vuex： 在应用的入口文件中引入Vuex store，然后将它注册到Vue实例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app=createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex： 在组件中使用mapState、mapMutations等辅助函数来访问和修改Vuex中的状态。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
    </ul>
    <input v-model="newTask" @keyup.enter="addNewTask" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['tasks']),
  },
  data() {
    return {
      newTask: '',
    };
  },
  methods: {
    ...mapMutations(['addTask']),
    addNewTask() {
      this.addTask({ id: Date.now(), text: this.newTask });
      this.newTask='';
    },
  },
};
</script>

通过上述步骤，你可以构建一个简单的任务管理应用，使用Vuex来管理全局状态。Vuex的核心概念包括state、mutations、actions等，它们协同工作，使得状态管理更加结构化和可维护。

总结起来，Vue3的响应式数据原理基于Proxy代理，可以轻松地创建响应式数据。而使用Vuex进行全局状态管理可以帮助你更好地管理应用的状态，让代码更加可预测和可追踪。

5. Vue Router：路由管理

介绍Vue Router的使用，展示如何在Vue3中实现页面路由和导航。通过示例代码，创建一个多页面的应用。

Vue Router是Vue官方提供的路由管理器，用于在单页面应用中实现页面路由和导航。它允许你根据不同的URL路径加载不同的组件，实现多页面的效果。

以下是一个简单的步骤，演示如何在Vue3中使用Vue Router创建一个多页面的应用：

安装Vue Router： 在命令行中运行以下命令来安装Vue Router。

npm install vue-router

创建路由配置： 在项目中创建一个路由配置文件，定义不同URL路径和对应的组件。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const routes=[
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

const router=createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在应用中使用Vue Router： 在应用的入口文件中引入Vue Router配置，并将其注册到Vue实例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app=createApp(App);
app.use(router);
app.mount('#app');

在组件中实现导航： 在组件中使用<router-link>组件来实现导航链接，使用<router-view>组件来渲染路由对应的组件。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

通过上述步骤，你可以在Vue3中使用Vue Router创建一个多页面的应用。Vue Router的核心概念包括<router-link>用于导航链接，<router-view>用于渲染路由组件，以及路由配置等。

在这个多页面应用中，不同的URL路径会对应不同的组件，用户可以通过导航链接在不同的页面之间进行切换。

6. Vue3生命周期与Hooks函数

了解Vue3中的生命周期和Hooks函数，掌握如何在不同阶段执行自定义操作。比较Vue2的Options API与Vue3的Composition API。

在Vue3中，生命周期钩子函数的命名和触发时机与Vue2相比有所改变。同时，Vue3引入了Composition API，这是一种新的组合式API，与Vue2中的Options API有所不同。

生命周期钩子函数

Vue3中的生命周期钩子函数名称和触发时机有所调整，主要有以下几点变化：

beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

在Vue3中，新增了一些更细粒度的生命周期钩子函数：

onRenderTracked: 在渲染时被追踪时触发
onRenderTriggered: 在渲染时触发重绘时触发

Composition API

Composition API是Vue3中引入的一种全新的API风格，旨在提供更灵活、可组合的代码复用方式。相对于Vue2的Options API，Composition API更加强调逻辑的组合和复用，使得代码更易维护和扩展。

Composition API的特点：

逻辑组合： 你可以将逻辑相关的代码组合在一起，更方便地进行重用。
逻辑复用： 可以将多个组合函数结合在一起，形成更大规模的逻辑复用单元。
逻辑分离： 不同功能的逻辑可以被拆分成不同的组合函数，让代码更模块化。
TypeScript支持： Composition API更适合与TypeScript等静态类型语言一起使用。

下面是一个简单的对比示例，展示Vue2的Options API和Vue3的Composition API的差异：

Vue2中使用Options API：

<template>
  <div>{{ count }}</div>
</template>

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

Vue3中使用Composition API：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count=ref(0);
    onMounted(()=> {
      count.value++;
    });
    return { count };
  },
};
</script>

总结而言，Vue3中的生命周期钩子函数名称和Composition API带来了一些变化，让开发者能够更加灵活地组织和复用代码逻辑。Composition API可以使代码更加模块化，方便维护和拓展。

总结：

Vue3作为最新的Vue.js版本，带来了众多的改进和新特性，使得开发现代化的Web应用更加高效和便捷。通过本教程，您将深入学习Vue3的核心概念、语法和最佳实践，掌握构建出色Web应用的技能。无论您是初学者还是有经验的开发者，都能在这里找到有价值的内容，开启现代Web开发之旅。

#vue#?

在线咨询

上一篇：《寄生虫》横扫奥斯卡，Python告诉你这部电影到底
下一篇：哇噻，简直是个天才，无需scroll事件就能监听到元

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「前端Vue学习系列」二、Vue基础篇

一、Vue项目的目录结构

二、基本语法

1、基本数据渲染和指令

2、双向数据绑定

3、修饰符

4、缩写

5、计算属性

6、侦听属性

7、条件渲染

8、列表渲染

9、过滤器

一、安装并创建实例

二、vue-router4 新特性

三、导航守卫

四、vue-router4 发生破坏性变化

1. 前言：为什么选择Vue3？

2. Vue3核心概念与基本语法

步骤 3：使用模板语法

步骤 4：运行应用

3. 组件化开发与单文件组件

为什么组件化很重要？

Vue3中的组件

使用Vue CLI构建项目

4. 响应式数据与状态管理

使用Vuex进行全局状态管理

5. Vue Router：路由管理

6. Vue3生命周期与Hooks函数

生命周期钩子函数

Composition API

您的项目需求