学习vue.js的第四天

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/darkdecode/article/details/102694382

fetch

1. 原生js提供了两种数据请求方式

   • ajax
   • fetch

2. ajax vs fetch

   • ajax需要封装的， fetch不需要
   • ajax不太符合MV* 开发方式，fetch可以认为是js为了MV*方式做的量身打造
   • fetch也是Promise

3. 封装axios / fetch

   • ajax
   • xhr
   • request
   • http

computed 计算属性

作用：可以将本应该在v中处理的逻辑迁移到vm中，让其更符合MVVM思想
注意： 计算属性就相当于计算出来的结果，我们最好不去更改它
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
示例：

watch 侦听属性

1. 作用： 监听的，添加一些副作用【 由某一个数据改变而引起的其他变化 】
2. 深入监听 vs 浅监听【 方法 】
   • 深入监听可以监听多层，而方法只能监听一层

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
示例：

axios封装

（这是一个函数，需要携带参数）
示例：

总结：methods vs computed vs watch

• 项目中如何使用

  • 事件处理程序： methods
    

  • watch 有大量数据交互和异步处理时进行
    

  • computed
    

    •     有逻辑处理
      

    •     V中像全局变量一样使用
      

混入

1. 混入的形式

• 全局混入 【 不推荐 】
• 局部混入

2. 混入的作用：

• 将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想

3. 局部混入的使用

选项  minxins

4. 全局混入

 Vue.mixin({})

组件

1. 了解前端组件化发展历史
   • 前后端耦合
     • 前后端不分离项目
       • 找后台搭建项目开发环境
       • 寻找项目目录中的静态资源目录
         • js
         • img
         • css
       • 同步修改css
   • 前后端分离
   • 前端团队合作项目的出现
     • 组件化为了解决多人协作冲突问题
     • 复用

2.组件的概念

• 组件是一个html 、 css 、js 、img 等的一个聚合体