总结vue3 的一些知识点：Vue3 起步

超、凢脫俗 2023-10-12 18:56 41阅读 0赞

**目录**

引言

Vue3 混入

实例

选项合并

实例

全局混入

实例

Vue3 起步

Vue 3.0 实例

data 选项

实例

方法

总结

--------------------

## 引言 ##

**Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！**

**![8c13f93681754831b37e19db7573ae59.jpeg][]**

# [Vue3 混入][Vue3] #

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

来看一个简单的实例：

## [实例][Link 1] ##

// 定义混入对象
    const myMixin = {
      created() {
        this.hello()
      },
      methods: {
        hello() {
          console.log('欢迎来到混入实例-RUNOOB!')
        }
      }
    }
     
    // 定义一个应用，使用混入
    const app = Vue.createApp({
      mixins: [myMixin]
    })
     
    app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"

--------------------

## [选项合并][Link 2] ##

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

## [实例][Link 3] ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(kxdang.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id = "app"></div>
    <script type = "text/javascript">
    const myMixin = {
      data() {
        return {
          message: 'hello',
          foo: 'kxdang'
        }
      }
    }
     
    const app = Vue.createApp({
      mixins: [myMixin],
      data() {
        return {
          message: 'goodbye',
          bar: 'def'
        }
      },
      created() {
        document.write(JSON.stringify(this.$data)) 
      }
    })

输出结果为：

{"message":"goodbye","foo":"kxdang","bar":"def"}

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

const myMixin = {
      created() {
        console.log('mixin 对象的钩子被调用')
      }
    }
    
    const app = Vue.createApp({
      mixins: [myMixin],
      created() {
        console.log('组件钩子被调用')
      }
    })
    
    // => "mixin 对象的钩子被调用"
    // => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

## [实例][Link 4] ##

const myMixin = {
      methods: {
        foo() {
          console.log('foo')
        },
        conflicting() {
          console.log('from mixin')
        }
      }
    }
     
    const app = Vue.createApp({
      mixins: [myMixin],
      methods: {
        bar() {
          console.log('bar')
        },
        conflicting() {
          console.log('from self')
        }
      }
    })
     
    const vm = app.mount('#app')
     
    vm.foo() // => "foo"
    vm.bar() // => "bar"
    vm.conflicting() // => "from self"

以上实例，我们调用了以下三个方法：

vm.foo();
    vm.bar();
    vm.conflicting();

从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

--------------------

## [全局混入][Link 5] ##

也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

## [实例][Link 6] ##

const app = Vue.createApp({
      myOption: 'hello!'
    })
     
    // 为自定义的选项 'myOption' 注入一个处理器。
    app.mixin({
      created() {
        const myOption = this.$options.myOption
        if (myOption) {
          document.write(myOption)
        }
      }
    })
     
    app.mount('#app') // => "hello!"

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

# [Vue3 起步][Vue3 1] #

刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

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

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

一个简单的实例：

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('\#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

接下来我们从 **Hello Vue!!** 的代码开始学起。

## [Vue 3.0 实例][Vue 3.0] ##

<div id="hello-vue" class="demo">
      {
       { message }}
    </div>
    
    <script>
    const HelloVueApp = {
      data() {
        return {
          message: 'Hello Vue!!'
        }
      }
    }
    
    Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>

点击 "尝试一下" 按钮查看在线实例 以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件：

HTML 页面中有一个 div 元素:

<div id="hello-vue" class="demo">
      {
       { message }}
    </div>

mount('\#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

\{ \{ \}\} 用于输出对象属性和函数返回值。

\{ \{ message \}\} 对应应用中 **message** 的值。

### [data 选项][data] ###

**data 选项**是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

## [实例][Link 7] ##

const app = Vue.createApp({
    data() {
    return { count: 4 }
    }
    })
    
    const vm = app.mount('#app')
    
    document.write(vm.$data.count) // => 4
    document.write("<br>")
    document.write(vm.count) // => 4
    document.write("<br>")
    // 修改 vm.count 的值也会更新 $data.count
    vm.count = 5
    document.write(vm.$data.count) // => 5
    document.write("<br>")
    // 反之亦然
    vm.$data.count = 6
    document.write(vm.count) // => 6

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

## [方法][Link 8] ##

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：

## 总结 ##

[8c13f93681754831b37e19db7573ae59.jpeg]: https://img-blog.csdnimg.cn/8c13f93681754831b37e19db7573ae59.jpeg
[Vue3]: http://kxdang.com/topic/vue3/vue3-mixins.html#vue3-%E6%B7%B7%E5%85%A5
[Link 1]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E5%AE%9E%E4%BE%8B
[Link 2]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E9%80%89%E9%A1%B9%E5%90%88%E5%B9%B6
[Link 3]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E5%AE%9E%E4%BE%8B-1
[Link 4]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E5%AE%9E%E4%BE%8B-2
[Link 5]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5
[Link 6]: http://kxdang.com/topic/vue3/vue3-mixins.html#%E5%AE%9E%E4%BE%8B-3
[Vue3 1]: http://kxdang.com/topic/vue3/vue3-intro.html#vue3-%E8%B5%B7%E6%AD%A5
[Vue 3.0]: http://kxdang.com/topic/vue3/vue3-intro.html#vue-30-%E5%AE%9E%E4%BE%8B
[data]: http://kxdang.com/topic/vue3/vue3-intro.html#data-%E9%80%89%E9%A1%B9
[Link 7]: http://kxdang.com/topic/vue3/vue3-intro.html#%E5%AE%9E%E4%BE%8B
[Link 8]: http://kxdang.com/topic/vue3/vue3-intro.html#%E6%96%B9%E6%B3%95