Vue中watch(侦听器)监听数据和路由发生改变

watch侦听器

侦听器(watch),就是当数据发生变化时,及时做出响应处理。Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

属性的侦听方式有两种:

1、实例中的watch属性
2、vm.$watch

监听数据

在这里插入图片描述
在前两个input框中输入数据之后,通过watch监听数据,同步显示在第三个input框中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
    <div id="app">
       <input type="text" name="" @keyup='getFullname' v-model='firstname' id="">+
       <input type="text" name="" @keyup='getFullname' v-model='lastname' id="">=
       <input type="text" name="" id="" v-model='fullname'>
    div>
    <script>
       
        var vm=new Vue({
      
            el:'#app',
            data:{
      
                firstname:'',
                lastname:'',
                fullname:''
            },
            methods: {
      
                getFullname(){
      
                    this.fullname=this.firstname+this.lastname
                }
            },
            watch:{
      
                'firstname':function(newVal,oldVal){
      
                	console.log(newVal+'====='+oldVal);
                    this.fullname=newVal+'-'+this.lastname
                }
            }
        })
    script>
body>
html>

使用这个属性可以监视data中指定数据的变化,然后触发这个watch中对应的function处理函数—>
不断的监测nVal的变化,nVal变化之后,便会触发函数

在这里插入图片描述
将输入的数据删除掉,查看终端:
Vue中watch(侦听器)监听数据和路由发生改变_第1张图片
第一行是监听到的数据
第二~三行是进行删除操作时,监听到的数据,等号(=)后边是旧的值,等号前是新值

监听路由


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
    <div id="app">
        <router-link to="/login">登录router-link>
        <router-link to="/register">注册router-link>
        <router-view>router-view>
    div>
    <script>
       
       var login={
      
           template:'

这是登录的组件

'
} var register={ template:'

这是注册的组件

'
} var router=new VueRouter({ routes: [ { path:'/',redirect: '/login'}, { path:'/login',component:login}, { path:'/register',component:register} ] }) var vm=new Vue({ el:'#app', data:{ }, methods: { }, router, // 使用这个属性 可以监视data中指定数据的变化,然后出发这个watch中对应的function处理函数 watch:{ // this.$route.path '$route.path':function(newVal,oldVal){ if (newVal==='/login') { console.log('欢迎进入到登录'); }else if(newVal==='/register'){ console.log('欢迎进入到注册'); } } } })
script> body> html>

Vue中watch(侦听器)监听数据和路由发生改变_第2张图片
Vue中watch(侦听器)监听数据和路由发生改变_第3张图片

你可能感兴趣的:(Vue.js,前端,侦听器,watch,监听,vue.js)