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

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

引言


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




Vue3 混入


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


来看一个简单的实例:


实例

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



选项合并


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


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


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


实例

<!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,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。


实例

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 实例有更高的优先级会执行输出。


全局混入


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


实例


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 起步


刚开始学习 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 实例


<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 文件:


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


HTML 页面中有一个 div 元素:


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


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


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


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


data 选项


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


实例

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 函数返回的对象中。


方法


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


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


总结


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


相关文章
|
11天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
31 0
|
12天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
12天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
33 0
|
12天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
18 0
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
12天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
2天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
8 0
|
3天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
6 0
|
3天前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
12 0