虚拟DOM+axios+fetch+深入式响应原理

虚拟DOM

1. VDOM的渲染流程
   • diff算法
     • 这个算法来源于后端，它的作用就是比较两个文件，然后将两个文件中的不同之处挑选出来
   • 将挑选出来的内容，形成补丁对象
   • render 方法【渲染函数】
     • 将vdom渲染为真实的dom
     • json xml text javascript + xml 结合生成了一种新的语法糖： JSX
     • 我们使用jsx结构模拟vdom,但是vdom是对象模型，我们必须将jsx 转换 vdom对象模型
     • 渲染页面【真实dom生成】
   • 基本流程
     • 数据获取
     • 创建VDOM
     • 渲染dom【render】
     • 数据改变
     • 重新生产vdom【render】
     • 通过diff算法进行两个vdom的比较，将不同之处挑选出来，形成一个patch对象【补丁对象】，再去重新渲染页面

axios

1. 验证–axio它底层封装的类似Promise

2. axios的使用方式

   1. 静态请求【模拟数据】

      // 获取静态数据
      console.log( axios(options) )
      console.log( axios({}) ) // Promise
      
      axios({
            url: './mock/data/movie.json',
            method: 'GET'
          }).then( res => console.log( res ))
            .catch( error => console.log( error ))
      

      2. 动态请求【真实接口】–get方法

         只有get方法使用params传参

         其他请求方式都用data传参

         axios({
             url: 'http://localhost/get.php',
             method: 'GET',
             params: {
                 a: 1,
                 b: 2
             }
             }).then( res => console.log( res ))
             .catch( error => console.log( error ))
         

         3. 动态请求【真实接口】–post方法

            const params = new URLSearchParams()
            
                // params.append(key,value)
                params.append('a',1)
                params.append('b',2)
            
                axios({
                  method: 'post',
                  url: 'http://localhost/post.php',
                  data: params
                }).then( res => console.log( res ) )
                  .catch( error => console.log( error ))
            

            3. axios会将我们请求的来的数据进行一层封装

            4. axios提供的官网文档有些问题

            5. 参数传递必须用URLSearchParams

               const params = new URLSearchParams()
               
               // params.append(key,value)
               params.append('a',1)
               params.append('b',2)
               

fetch

1. fetch是原生javascript提供的，我们可以直接向全局变量一样使用

2. fetch也是Promise

3. fetch返回的结果是没有进行封装的，是直接暴露的

4. fetch数据格式化的方式有哪些？

   • json（）
     • text（）
       • blob（）格式化二进制【视频 图像 音频】

5. 总结：

   • axios vs fetch post 请求都是一些问题的
   • 处理方式：
     • 先设置请求头
   • 通过new URKSearchParams来进行传参的

6. 使用fetch请求数据

   • i. 静态请求【模拟数据】

     fetch('./mock/data/data.json')
           .then( res => res.json() )  // 数据格式化 
           .then( data => console.log( data ))  // 获取数据格式化的数据
           .catch( error => console.log( error )) // 错误捕获
     

   • ii. 使用fetch请求动态数据get

     数据需要拼接在url里

     fetch('http://localhost/get.php?a=1&b=2')
           .then( res => res.text() )  // 数据格式化 
           .then( data => console.log( data ))  // 获取数据格式化的数据
           .catch( error => console.log( error )) // 错误捕获
     

   • iii.使用post请求动态数据

     数据需要使用URLSearchParams传递

     fetch('http://localhost/post.php', {
         method: 'POST', // or 'PUT'
         body: new URLSearchParams([['a',1],['b',2]]).toString(),
         // 请求头可有可无
         headers: new Headers({
         'Content-Type': 'application/x-www-form-urlencoded'
         })
     }).then(res => res.text())
     .catch(error => console.error('Error:', error))
     .then(response => console.log('Success:', response));
     

深入响应式原理【 数据驱动原理/ 双向数据绑定原理 】 【 面试题 - 王者 】

1. 深入式原理

   • 数据模型仅仅式普通的javascript对象，而当你修改他们时，视图会进行更新

2. 数据驱动

   • 数据改变，视图改变

3. 双向数据绑定原理

   • 我们使用v-model这个指令来实现，数据改变，视图改变，视图改变，数据也随之改变

   公共答案：
   Vue是通过数据劫持和订阅发布来进行深入响应的，数据集吃指的是，vue通过es5的object.defineProperty属性对data选项中的数据进行getter和setter设置，订阅发布指的是vue通过之定义自定义事件将data的变化反映到视图上去，vue通过observer观察者对象反应数据的变化，然后通知vue生成新的Virtual DOM ，进而渲染视图

   关键词：
   数据劫持
   订阅发布
   es5 Object.defineProperty getter setter
   observer对象
   将data选项中的数据全部做一遍getter和setter设置，然后他们的变化就会被observer监听到

   Vue3.0会将 es5的Object.defineProperty 改用 es6/7 的observer