Vue侦听器

一。什么是侦听器？

侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名。我们使用的时候 要侦听那个数据 就用那个数据名作为方法名即可

二．侦听器有什么作用？

Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。

三．侦听器的基本使用

    <div id="app">
        <button @click="msg='你好'">修改值</button>
        <p>{{msg}}</p>
    </div>
</body>
<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        msg:'hello'

    },
      watch:{
        //侦听的数据变化
        //基本数据类型，这两个参数有意义。
      msg(newVal,oldVal){
        //侦听到数据变化之后，需要完成的行为。
        console.log('数据改变了',newVal,oldVal);
      }
      }
})
</script>
</html>

实例：

 

四.侦听器在数组的使用

    <div id="app">
        <button @click="list.push('蜡笔小新')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!-- 利用索引值改变数组时，不能被侦听到 -->
        <button @click="list[0]='病猫'">修改第一项</button>
        <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script src="../Vue/vue.js"></script>

<script>
new Vue({
    el:'#app',
    data:{
        list:['龙猫','名侦探柯南','千与千寻','你的名字']
    },
    watch:{
        list(newVal,oldVal){
            console.log('数组改变了',newVal,oldVal);
        }
    }
})

实例：

 

这些方法会触发数组改变, v-for会监测到并更新页面

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

这些方法不会触发v-for更新

• slice()
• filter()
• concat()

五。侦听器对对象进行侦听

 <div id="app"> 
        <p>{{obj.name }}---{{obj.age }}---{{obj.height}}</p>
          <button @click = "obj. name = 'rose'">修改obj的name属性</button> 
          <button @click = "obj.age = 30">修改objinage属性</button>
          <button @click = "obj = {name: 'andy', age:99} ">修改obj的指向</button> 
     </div>
<script src="../Vue/vue.js"></script>
<script>
new Vue({ 
    el:'#app', 
    data:{
         obj: {
             name:'jack',
              age:20, 
              height:185
          }
         },
          watch:{
        
             }
            })

实例：

 

六.侦听器的immediate用法

当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立刻执行一次监听操作。

watch:{
	handler(newv){
		// 处理
	},
	deep:true,
	immediate:true
}

七。deep深度监听

deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，如果想实现这个效果，则需要添加deep配置为true

watch: {
    obj: {
      handler () {
        console.log('我触发了');
 
      },
      deep: true, // 深度侦听
      immediate: true,//立刻触发
    }
  }
}

Cookie

什么是cookie？

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。

2.cookie特点

1.cookie保存在浏览器端。

2. 单个cookie保存的数据不能超过4KB。

3.cookie中的数据是以域名的形式进行区分的。

4.cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

5.cookie中的数据会随着请求被自动发送到服务器端。

SessionStorage（临时储存）

1.存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
2.页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文

localStorage（永久储存）

1.localStorage也是Storage类型的一个对象。

2.localStorage会永久存储会话数据

3.localStorage为永久保存

JSON

什么是json?

1.JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。

2.JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。

JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'