vue总结（二）

2022-03-03

前言

第二波~

1、关于VueComponent

(1) 自定义组件实质上是一个名为VueComponent的构造函数，且不是我们定义的，是Vue.extend生成的；

(2) 每次调用Vue.extend，返回的都是一个全新的VueCompent。

2、原型、原型链

原型链让组件实例对象可以访问到Vue原型上的属性和方法。

function Demo(){
    this.a = 1
    this.b = 2
}
const d = new Demo()
console.log(Demo.prototype)  //显式原型属性
console.log(d.__proto__) //隐式原型属性
console.log(Demo.prototype === d.__proto__)  //true

VueComponent.prototype.__proto__ === Vue.prototype

3、package.json中dependencies和devDependencies的区别？

添加到dependencies：

npm install demo –save

或

npm install demo

添加到devDependencies：

npm install demo –save-dev

dependencies中的依赖项是正常运行该包所需要的依赖项；
devDependencies中的依赖项是开发的时候所需要的依赖项，比如一些进行单元测试之类的包；

4、vue中render函数的作用？

为没有模板解析器的vue版本进行模板解析。为什么会有没有模板解析器的vue版本？为了提高效率。

5、如何查看vue-cli的配置项？

命令行：vue inspect > output.js

6、如何自定义一个插件？

功能：用于增强vue。

本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue,options){
    //1、添加全局过滤器
    Vue.filter()
    //2、添加全局指令
    Vue.directive()
    //3、配置全局混入
    Vue.mixin()
    //4、添加实例方法
    Vue.prototype.$myMethod = function(){...}
    Vue.prototype.$myPerpoty = 'xxxx'
}

使用插件：Vue.use(对象)

7、使用v-model时，绑定的值不能是props传过来的值，因为props是不可以修改的。

props传过来的值若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

8、组件自定义事件

一、绑定自定义事件

场景：子组件给父组件传递数据。

注意：默认给组件绑定的click等原生事件，组件会认为是自定义事件。

解决方法：给click事件加修饰符native

1	<demo @click.native='show'/>

使用$emit绑定

方法一：

父组件：

<demo :demo='demoEvent'>
methods: {
  demoEvent(){
    console.log('demo')
  }
}

方法二：

父组件：

<demo ref='demo'>
methods: {
  demoFunc(){
    console.log('demo')
  }
}
mounted(){
    this.$refs.demo.$on('demoEvent',demoFunc)
}

区别：第一种会马上渲染，而第二种可以使用setTimeout，等待几秒后渲染。

二、解绑自定义事件

（1）解绑一个

1	this.$off('demo')

（2）解绑多个

1	this.$off(['demo','demo1])

（3）解绑所有

1	this.$off()

9、全局事件总线(EventBus)

作用：可以实现任意组件间的通信。

const Demo = Vue.extend({})
const d = new Demo()
Vue.prototype.$bus = d
//或者
new Vue({
    el: '#app',
    render: h=> h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})
//如何绑定
this.$bus.$on('demoEvent', 666)
//如何解绑
this.$bus.$off('demoEvent')

10、消息订阅与发布

使用pubsub.js库进行消息订阅与发布，可以实现任意组件间的通信。

11、$nextTick(回调函数)：下一次DOM更新结束后执行其指定的回调。

12、如何解决跨域问题？

原因：违背了同源策略（协议名、域名、端口号）。

（1）cors：主要是后端配置。

（2）jsonp：我们发现Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如