Vue基础三（下）

最新推荐文章于 2023-07-19 17:30:30 发布

cfr1994

最新推荐文章于 2023-07-19 17:30:30 发布

阅读量90

点赞数

分类专栏： Vue 前端框架文章标签：计算属性侦听属性混入 axios-拦截器 Vue

本文链接：https://blog.csdn.net/cfr1994/article/details/102697465

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

9 篇文章 0 订阅

订阅专栏

计算属性

computed 是Vue中的一个选项
作用：可以将本应该在v中处理的逻辑迁移到vm中，让其更符合MVVM思想
注意：计算属性就相当于计算出来的结果，我们最好不要去更改它

<body>
  <div id="app">
    {{ str.split('').reverse().join('') }}
    <!-- 没有 computed 时这样实现 -->
    <p> {{ newStr }} </p>
    <p> {{ newMsg }} </p>
    <input type="text" v-model = "newMsg">
    <p> title: {{ title }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* ! 思考：数据需要 反向 输出渲染在页面，如何处理
     str -> you Love yourself !!!
  */
  new Vue({
    el: '#app',
    data: {
      str: 'You love yourself !!! ',
      title: ''
    },
    computed: {
      /* 第一种方式： 方法 */
      newStr () {
        return this.str.split('').reverse().join('')
      },
      /* 第二种方式： 存储器 */
      newMsg: {
        get () {
          return this.str.split('').reverse().join('')
        },
        set ( val ) {
          console.log( val ) // input中的value值，get()中返回的新值
          this.title = val 
        }
      }
    }
  })
</script>

侦听属性

watch 是Vue中一个选项
作用：监听数据的变化，当数据发生改变时，添加一些副作用（操作）【由某一个数据改变而引起的其它的变化】
深入监听 vs 浅监听【方法】
- 深入监听可以监听多层，而方法只能监听一层

浅监听

<body>
  <div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ count }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    watch: {
      count () {
        /* watch里面key名称就是数据的名称 */
        /* 当我们修改count这个数据时，这个方法自动触发了 */
        /* 
          * 项目中 - 上拉加载
            异步操作 - 数据请求 
        */
        document.title = this.count 
      }
    },
    methods: {
      increment () {
        this.count ++
      }
    }
  })
</script>

深度监听

<script>
  new Vue({
    el: '#app',
    data: {
      num: {
        count: 0
      }
    },
    watch: {
     num: {
       deep: true, // 深度监听
       handler ( val ) {
         console.log('handler') // handler
         console.log( val )
         document.title = this.num.count
       }
     }
    },
    methods: {
      increment () {
        this.num.count ++
      }
    }
  })
</script>

总结

methods vs computed vs watch
- 事件处理程序：methods
- watch 有大量数据交互和异步处理时进行
- computed
  - 有逻辑处理
  - V中像全局变量一样使用

混入

minxin
- 混入的形式

	- 全局混入【不推荐】

<body>
  <div id="app">
    <p> {{ num }} </p>
    <p> {{ msg }} </p>
    <button @click = "aa"> aa </button>
    <button @click = "bb"> bb </button>
  </div>

  <div id="root">
    <!-- 同样生效 -->
      <button @click = "aa"> aa </button>
      <button @click = "bb"> bb </button>
  </div>
</body>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  /* 全局混入   Vue.mixin(config) */
  Vue.mixin({
    methods: {
      ...methods
    }
  })
  
  new Vue({
    el: '#app',
    data: {
      num: 1000,
      msg: 'Vue'
    }
  })

  new Vue({
    el: '#root'
  })
</script>

/* 这个文件就是管 方法的，为了更加好的维护和更新 */
// 全局混入
const methods = {
  aa () {
    alert('aa')
  },
  bb () {
    alert('bb')
  }
}

	- 局部混入

<body>
  <div id="app">
    <p> {{ num }} </p>
    <!-- 2000 -->
    <p> {{ msg }} </p>
    <button @click = "aa"> aa </button>
    <button @click = "bb"> bb </button>
    <p> {{ yybMsg }} </p>
  </div>
</body>
<script src="./js/data.js"></script>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    分出去的mixin权利是没有总部（下面Vue的data）的大
  */
  new Vue({
    el: '#app',
    data: {
      yybMsg: 'Vue.js',
      num: 2000
    },
    mixins: [ data,obj ]
  })
</script>

/* 
  这个文件管理数据
*/

const data = {
  data: {
    num: 1000,
    msg: 'Vue'
  }
}

/* 
  局部混入
*/
const  obj = {
  methods: {
    aa () {
      alert('aa')
    },
    bb () {
      alert('bb')
    }
  }
}

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

axios 拦截器

http://www.axios-js.com/docs/

/* axios拦截器 
  * 数据请求前拦截 
  * 数据请求得到结果后拦截
*/
// Add a request interceptor // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent // 在发送请求之前做些什么
    ......
    return config;
  }, function (error) {
    // Do something with request error // 对请求错误做些什么
    return Promise.reject(error);
  });

// Add a response interceptor // 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data // 对响应数据做点什么
    ......
    return response;
  }, function (error) {
    // Do something with response error // 对响应错误做点什么
    return Promise.reject(error);
  });