vue.js的实例在页面尾部创建的时候，页面会闪一下怎么解决

Posted 2023-05-07

参考技术A 1、响应式属性和方法
每个 Vue 实例都会代理其 data 对象里所有的属性。
var data = a: 1
var vm = new Vue(
data: data
)

vm.a === data.a // -> true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 312345678910111213

即：都可以使vm.xxx这种方式获取和修改实例属性。
注意：
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。
那么这种情况的话，可以使用VueJs的vm.$xxx的方式来修改实例属性，这同样会触发视图更新，响应式的改变。
2、生命周期钩子
生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
钩子的 this 指向调用它的 Vue 实例
我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念，组件的自定义逻辑可以分割在这些钩子里面。
3、插值本回答被提问者采纳

Vue.js如何在一个页面调用另一个同级页面的方法

使用场景：

页面分为header、home、footer三部分，需要在home中调用header中的方法，这两个没有相互引入

 

官方给出方法：

需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，看了一下vue的API发现可以用这个方法实现。

https://cn.vuejs.org/v2/api/#vm-on

 

在项目中实现：

1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。

建立 util.js 中转站文件（任意位置,我是在/assets/js/util.js）

import Vue from \'vue\'
export default new Vue

 

2.分别在两个页面引入该文件（注意路径）

import Utils from \'../../assets/js/util.js\';

 

3.调用方代码

methods: {
    functionA() {
        Utils.$emit(\'demo\',\'msg\');
    }
}

 

4.被调用方代码

mounted(){
    var that = this;
    Utils.$on(\'demo\', function (msg) {
        console.log(msg);
        that.functionB();
    })
},
methods: {
    functionB() {
        ...
    }
}