Vue深入响应式理解、v-mode 双向数据绑定、watch、axios、fetch数据请求、mixins/global、:key

1.Vue深入响应式原理

1. vue深入响应式原理

数据模型–》 vm中 的data选项
状态管理
什么叫做状态?什么叫做状态管理?
我们使用一个数据去管理视图中的一个部分, 那么这条数据就叫做状态, 这种管理模式就叫做状态管理
总结:

1. 什么是深入响应式原理?王者级的

深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候, 视图就会响应的进行更新, 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释:
数据劫持: Object.defineProperty中的getter/setter , 然后在执行watcher
订阅发布:事件(自定义事件)
订阅: 事件的声明 vm. o n 发 布 : 事 件 的 触 发 v m . on 发布: 事件的触发 vm. onvm.emit

2. 非响应式情况

在vm模型的data外定义的属性, 就是非响应式属性, 非响应式属性, 属性值更新, 视图不会更新

3. 非响应式属性如何变成响应式属性

思维: 将非响应式属性合并到响应式属性身上
解决: 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)

4. Vue.set底层原生是什么?

Object.assign(目标对象,对象1, 对象2,对象3)

2.v-mode 双向数据绑定

1. 效果

数据改 , 视图更
视图改, 数据更

2. 实现

使用v-model实现

3. 缺点

v-model默认绑定value属性, 所以v-model只能在表单使用

4. 原理

  1. 为什么数据能直接在视图显示
    v-model默认绑定了DOM对象的value属性, 当它初次绑定的时候,
    就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树,
    再通过render函数进行渲染,生成真实DOM
  2. 为什么视图修改数据就会修改
    当视图修改是, 意味着DOM的value属性值改变,就会触发setter,watcher监听机制就会执行
    watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM

3.watch

1. 作用:

用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发

2. 使用

两种用法:
  1. key的value值是一个函数 普通玩家
    new Vue({
        watch: {
            key(value,oldvalue){}
        }
    })
  1. key的value值是一个对象 主播/职业玩家
new Vue({
    watch: {
         key: {
        deep: true/false 深入监听,
        handler(value,oldvalue){} // 监听的处理函数
        }
    }
    })

watch中的key指的就是data选项中key

4.axios、fetch数据请求

1.axios get

methods:{
    axiosGet(){
        axios({
            method: 'get',
            url:'http://127.0.0.1:8080/lx4.19data/get-data.php',
            params:{
                a:1,
                b:2
            }
        }).then((res)=>{
            console.log(res)
                })
        }

2.axios post

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; post请求需要设置请求头
let params=new URLSearchParams();
    params.append('a',1);
    params.append('b',5)
axiosPost(){
    axios({
        method:'post',
        url:'http://127.0.0.1:8080/lx4.19data/post-data.php',
        data:params,
        //
        headers: {
        'Content-Type': "application/x-www-form-urlencoded"
        } //头部写在里面也可以
    }).then((res)=>{
        console.log(res)
        })
    }

3.fetch get

methods:{
    fetchGet(){
        fetch('http://127.0.0.1:8080/lx4.19data/get-data.php?a=3&b=5') //fetch的参数写在url里面
    .then(res => res.text()) //注意!要写格式转换!
    .then(data => console.log(data))
    .catch((err)=>{
            if(err){
                throw err;
                }
            })
        }
    }

4.fetch post

fetch('http://127.0.0.1:8080/lx4.19data/post-data.php',{
    method:'post',
    headers:new Headers({
        'content-type':'application/x-www-form-urlencoded'
        }),注意post方法需要设置请求头
    body:new URLSearchParams([['a',1],['b',8]]).toString()
        })
    .then(res=>res.text())
    .then(data=>console.log(data))
    .catch((err)=>{
        if(err){
            throw err
            }
        })

5.mixins

<body>
 <div id="app">

   <button @click = "sum"> 点击 </button>
   <button @click = "redecer"> 点击 </button>
 </div>
</body>
<script>

 var mixin = {
   methods: {
     sum(){
       alert( 10*10 )
     }
   },
 }

 new Vue({
   el: '#app',
   data: {},
   watch: {},
   mixins: [mixin],
   methods: {
     redecer(){
       alert( 100-10 )
     },
     sum(){
       alert('1111')
     }
   },
   computed: {}
 })
</script>

6.global

  Vue.mixin({
    methods: {
      changeName(){
        alert('zhangjun')
      }
    }
  })

7.key的作用

      <li v-for = " (item,index) in list " :key = "item.id">
      <p> {{item.name}} </p>
      <button @click = "remove(index)"> 删除 </button>
      <button @click = "changeStyle"> 修改样式 </button>

为了防止删除数据index时,剩余的值index自动发生改变,所以使用唯一的key -> id :key=“item.id”

你可能感兴趣的:(Vue.js)