时间戳

首页 > 技术文章 > vue页面自动刷新的问题

vue页面自动刷新的问题

newbest 2019-07-18 21:50 原文

1、 activated (VUE页面自动刷新的问题)

在项目中遇到需要添加完数据之后跳转到展示页不自动刷新的问题，最开始想到的是created（）或者 mounted（）；没能实现；因为全局vue.js不强制刷新或者重启时只创建一次，也就是说，created（）或者mounted（）只会触发一次。

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。

2、watch

watch ：在vue实例化时将会遍历所有属性，然后监听其变化。

<body>
    <div id="app">
        <input v-model="name"/>
        <span>{{name}}</span>
    </div>
</body>
	<script>
		app = new Vue({
			el:"#app",
			data:{
				name:'1'
			},
			watch:{
				name:function(){
					console.log("changed");
					this.show();
				}
			},
			methods:{
				show(){
					console.log("show function")
				}
			}
		})
	</script>

3、computed 计算属性

computes: 其中的属性不用在data中定义，示例如下：

<div id="app">
	<input v-model="name" />
	<span>{{names}}</span>
</div>

<script>
		app = new Vue({
			el:"#app",
			data:{
				name:''
			},
			computed:{
				names:function(){
					return this.name + "world";
				}
			}
		})
</script>

推荐阅读