Vue3官网基础（一）安装、介绍（语法介绍）、组件化应用、应用实例、根组件、生命周期钩子

Vue3官网基础（一）安装、介绍（语法介绍）、组件化应用、应用实例、根组件、生命周期钩子

总结：

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 语法

  • 文本插值

    • Counter: {
               { counter }}
      

  • 绑定元素的 attribute

    • <span v-bind:title="message">
      

  • 事件监听器

    • <button v-on:click="reverseMessage">反转 Message</button>
      

  • 表单输入和应用状态之间的双向绑定

    • <p>{
               { message }}</p>
      <input v-model="message" />
      

  • 条件判断

    •  <span v-if="seen">现在你看到我了</span>
      

  • 循环

    • <li v-for="todo in todos">
         {
               { todo.text }}
      </li>
      

• 组件化应用

  • 它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

    

  • 组件本质上是一个具有预定义选项的实例。

  • 在 Vue 中注册组件很简单：如对 App 对象所做的那样创建一个组件对象，并将其定义在父级组件的 components 选项中：

    // 定义名为 todo-item 的新组件
    app.component('todo-item', {
            
      template: `<li>This is a todo</li>`
    })
    

• 应用实例

  • 每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：

    const app = Vue.createApp({
            
      /* 选项 */
    })
    

  • 该应用实例是用来在应用中注册“全局”组件的。

    const app = Vue.createApp({
            })
    app.component('SearchInput', SearchInputComponent)
    app.directive('focus', FocusDirective)
    app.use(LocalePlugin)
    

• 根组件&mount挂载应用实例&组件实例

  • //RootComponent是根组件
    const RootComponent = {
             
      /* 选项 */ 
    }
    
    //app是应用实例
    const app = Vue.createApp(RootComponent)
    //组件实例 vm=ViewModel
    const vm = app.mount('#app')
    

• 生命周期钩子

  • 生命周期包括不同阶段

    • 初始化 (create)— 组件挂载(mount)-----组件更新 (update)— 销毁(destroy)

    • 生命周期	发生了什么
      beforeCreate	初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问
      created	初始化界面后 : 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数,也就是不会更新视图，SSR可以放这里。
      beforeMount	挂载前 ：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated
      mounted	挂载完成 ： 将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作
      beforeUpdate	更新数据前 ： 组件数据更新之前调用，数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据，不会造成重渲染
      updated	组件更新后 ： render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新
      beforeDestroy	组件卸载前 : 实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器
      destroyed	组件卸载后 ： 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
      activited	keep-alive 专属 , 组件被激活时调用
      deactivated	keep-alive 专属 , 组件被销毁时调用

  • 不同的钩子函数

    • created 钩子：可以用来在一个实例被创建之后执行代码
    • mounted、
    • updated
    • unmounted

  • 生命周期钩子的 this 上下文指向调用它的当前活动实例。

  • 不要在选项 property 或回调上使用箭头函数，因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

1. 安装

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式：

1. 在页面上以 CDN 包的形式导入。
2. 下载 JavaScript 文件并自行托管。
3. 使用 npm 安装它。
4. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

发布版本说明

最新版本：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1cijeJQ-1631708035430)(https://img.shields.io/npm/v/vue/next.svg)]

每个版本的详细发布说明都可以在 GitHub 上找到。

Vue Devtools

目前处于测试阶段 - Vuex 和 Router 的集成仍在进行中。

在 Vue School 的免费课程中学习如何安装和使用 Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。

获取 Chrome 扩展程序

获取 Firefox 附加组件

获取独立的 Electron 应用程序

CDN

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://unpkg.com/vue@next"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

下载并自托管

如果你想避免使用构建工具，但又无法在生产环境使用 CDN，那么你可以下载相关 .js 文件并自行托管在你的服务器上。然后你可以通过 <script> 标签引入，与使用 CDN 的方法类似。

这些文件可以在 unpkg 或者 jsDelivr 这些 CDN 上浏览和下载。各种不同文件将在