Vue选项之extends扩展

extends扩展和mixins很像,不同点是extends传入的是对象写法,而mixins是数组写法.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>lianxi</title></head><body><div id="app">{{num}}<p><button @click="add">ADD</button></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let extendObj={updated:function(){//updated是Vue生命周期console.log("我是扩展的updated");},methods: {add(){console.log("我是扩展出来的ADD方法");//和混入一样:当原生有同一个方法时,扩展出来的方法不会执行,只会执行原生的方法                }},}let app = new Vue({el: '#app',data:{num:1},methods:{add(){console.log("我是原生的ADD方法");      this.num++;}},updated() {console.log("我是原生的updated");// },extends:extendObj})</script></body>
</html>

实现结果:

注意点:extends扩展和mixins混入一样,当原生有同一个方法时,扩展出来的方法不会执行,只会执行原生的方法
补充:
我用component写一下：

<hello></hello>
Vue.component('hello',
template: '<p>{{firstName}}</p>',data: function () {return {firstName: 'Walter',}})

结果都是一样的

<p>Walter</p>

看起来，extend写法还更恶心一点不但要创建构造器，还要new一个实例，还要挂载到特定的元素上，这个特定元素最终还被完全替换了，不像component用起来那么舒服，注册好特定的名字之后，想在哪里用，就在哪里写组件名，程序还更易读。那不用看下去了，以后都用component了。

所以说extend到底有什么优势呢？只要绕开官网的坑就明白了，生成的实例并不一定要"挂载到一个元素上"。也就是

new 实例().$mount() 的 $mount()$mount()$mount()$mount()$mount()......（重要的坑要提醒一百遍）的参数可以为空，但他依旧能生成一个实例。那么问题来了，生成的实例不挂载到dom文档流里面，有什么用？木有关系！生成的实例里面有$el这个参数，记录了生成的dom啊，这个dom你想插哪里插哪里。（document.body.appendChild( 实例.$el）)总结：component是extend的亲民版，但在实现某些特殊需求的时候，就需要用到extend，如alert组件，你肯定希望alert可以动态插入到body中，而不需要在dom文档流中放一个莫名其妙的alert，大部分时间他还是隐藏的。（你能用component实现我服你）

Vue选项之extends扩展相关推荐

在google应用商店下载的Vue.js Devtools在控制台没有vue选项
第一种:图标不亮首先,如果最上面那个vue图标如果没有亮,说明当前页面不是vue写的,控制台必然没有vue选项,找一个vue写的网页打开就亮了,比如哔哩哔哩.如果亮了之后控制台还是没有vue选项,就 ...
在google应用商店下载的Vue.js Devtools在控制台(开发者模式)没有vue选项
在google应用商店下载的Vue.js Devtools在控制台没有vue选项第一种:图标不亮第二种:图标亮,但是在下面的控制台选项中没有vue 第一种:图标不亮首先,如果最上面那个vue图标 ...
BOOST使用 proto::extends 扩展终端类型的简单示例
BOOST使用 proto::extends 扩展终端类型的简单示例实现功能 C++实现代码实现功能 BOOST使用 proto::extends 扩展终端类型的简单示例 C++实现代码 #inc ...
Vue选项: Methods方法
在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来达到逻辑代码复用的目的. 在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以 ...
Vue选项式 API 的生命周期选项和组合式 API
Vue2.Vue3 生命周期的变化正好在看Vue的官方文档,也正好比对一下,做一下笔记选项式 API 的生命周期选项的变化这里我们会发现Vue3对Vue2的生命周期钩子似乎没有做大的调整修改 ...
Vue mixins 和 extends 使用详解
Vue 提供了mixins 和 extends 来在组件里直接合并一些特定的属性. 用法如下: var mixin = {created: function () { console.log(1) } ...
VUE vue-devtools 安装成功，但是图标为灰色，且控制台无vue选项的解决办法
今天在学习VUE的过程中,安装了vue-devtools工具,但是发现图标一直是灰色,解决后,记录一下解决办法: 1.查看拓展程序打开开发者模式和插件,如图所示两个开关,具体操作为:点击浏览器右上角 ...
vue 对象继承_Vue2.0中组件的继承与扩展是什么
Vue2.0中组件的继承与扩展是什么发布时间:2020-12-07 14:04:09 来源:亿速云阅读:100 作者:小新小编给大家分享一下Vue2.0中组件的继承与扩展是什么,相信大部分人都还 ...
配置 Vue 实例（选项）
文章目录一.总览二.DOM 2.1 el && template 选项 2.2 render 选项 2.3 renderError 选项三.数据 3.1 data 选项 3.2 ...

Vue选项之extends扩展

Vue选项之extends扩展相关推荐

最新文章

热门文章