devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web学习笔记（七十）

作者：Li_阴宅 | 2024-07-15 18:03:37

赞

踩

web学习笔记（七十）

目录

1.webpack和vite区别

2. vue2声明数据和绑定事件

3.vue2 data为什么必须是函数？

4.vue2事件传参

5.计算属性和watch 

6.this.$router和this.$route

1.webpack和vite区别

  1. 它们都是代码构建工具，就是把项目中的.vue文件转换为浏览器认识的html和css代码；
  2. 他们的核心功能是编译代码，将组件化的代码最终转化为html、css、js,以便浏览器能够识别代码并加载页面。附加功能：（1）提供了一个开发服务器，方便调试；（2）压缩css和js代码；（3）组件拆包，提升首屏加载速度（路由懒加载）
  3. 在开发阶段vite比webpack编译速度快，因为webpack在开发阶段，也是实时的将组件转换为js，是实时编译的，因此每次保存代码webpack都要把整个项目全部编译一遍，效率低下，而vite开发阶段采用的是js模块化方式来编译项目，不是全量编译，速度快。

2. vue2声明数据和绑定事件

vue2是选项式api，所有的响应式数据都要写在data中，并且需要return出去，事件的绑定方法和vue3是一样的，但是需要将声明的方法都写在   methods对象中。

  1. <template>
  2.     <div class="home">
  3.       <h2>首页</h2>
  4.       <button @click="add">加</button>
  5.       <button @click="subtract">减</button>
  6.       <h2>{{ count }}</h2>
  7.     </div>
  8.   </template>
  9.   <script>
  10.   export default {
  11.     name: "HomeViem",
  12.     data() {
  13.       return {
  14.         // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
  15.         count: 1,
  16.       };
  17.     },
  18.     methods: {
  19.       add() {
  20.         this.count++;
  21.       },
  22.       subtract() {
  23.         this.count--;
  24.       },
  25.     },
  26.   };
  27.   </script>

需要注意的是如果页面中并不需要响应式数据就可以不写data，但是只要写data就一定要在内部写一个return,哪怕data内部并没有声明响应式数据也一定要写return。 在script里面调用响应式数据和方法都是需要通过this来操作的，eg：this.count

3.vue2 data为什么必须是函数？

       如果data不是函数，而直接写一个对象，那么所有组件共用同一个数据了，此时的数据变成了全局变量，任意一个组件修改data中的数据，所有组件都会同步变化，这样的话，组件复用就会出现问题，因为组件复用本质上是复用的标签结构和样式而已，数据肯定不能共享，每个组件实例对象this都需要维护自己内部的数据，保证数据的独立性。因此data必须是函数，且函数内部需要返回一个新对象，每次组件实例this被创建的时候，vue都会调用data这个函数，返回一个新对象，对象内部包裹的就是当前组件所拥有的响应式数据。

4.vue2事件传参

和vue3的传参方式是一样的，在没有自定义参数时可以在事件内部直接打印事件对象e，输出相关信息，但是当有自定义参数时需要在传实参时传一个$event，然后在形参的位置用e接一下，再在事件内部输出事件对象e。

  1. <body>
  2.     <div id="app">
  3.         <h1>{{num}}</h1>
  4.         <button v-on:click="add">++</button>
  5.         <button @click="add5(5,$event)">+5</button>
  6.     </div>
  7.     <script src="./vue.js">
  8.  
  9.     </script>
  10.     <script>
  11.         new Vue({
  12.             el: '#app',
  13.             // 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。
  14.             data: {
  15.                 num: 0
  16.             },
  17.             // methods方法
  18.             methods: {
  19.                 add: function (e) {
  20.                     // 事件对象
  21.                     console.log(e);
  22.                     console.log(this);
  23.                     this.num++
  24.                 },
  25.                 add5(n, e) {
  26.                     console.log(e);
  27.                     this.num += n;
  28.                 }
  29.             }
  30.         })
  31.     </script>
  32.  
  33. </body>

5.计算属性和watch 

vue2中计算属性需要写到computed选项内部。watch监听需要写到watch选项内部

（1）计算属性主要用于计算购物车商品总价，会根据响应式数据的变化自动计算结果。需要注意的是计算属性必须返回一个结果。

  1. <template>
  2.   <div class="home">
  3.     <h2>首页</h2>
  4.     <button @click="add">加</button>
  5.     <button @click="subtract">减</button>
  6.     <h2>{{ count }}</h2>
  7.     <p>双倍{{ doublecount }}</p>
  8.     <p>加100 {{ testcount }}</p>
  9.   </div>
  10. </template>
  11. <script>
  12. import { computed } from "vue";
  13. // this.$router  用来跳转路由  this.$router.push()  this.$router.replace
  14. // this.$route  用来获取路由参数 this.$route.query
  15. export default {
  16.   name: "HomeViem",
  17.   data() {
  18.     return {
  19.       // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
  20.       count: 1,
  21.     };
  22.   },
  23.   methods: {
  24.     add() {
  25.       this.count++;
  26.     },
  27.     subtract() {
  28.       this.count--;
  29.     },
  30.   },
  31.   computed: {
  32.     // 使用场景：购物车计算商品总价
  33.     // 根据响应式数据的变化自动计算结果。
  34.     //   计算属性必须返回一个结果
  35.     doublecount() {
  36.       return this.count * 3;
  37.     },
  38.     testcount() {
  39.       return this.count + 100;
  40.     },
  41.   },
  42.  
  43. };
  44. </script>

 （2）watch监听可以监听路由的跳转或者响应式数据的变化，没有返回结果，只是监听， 做实时搜索可以用，watch监听有两者写法，一种是函数写法，一种是对象写法，当需要开启深度监听或者首次触发时就需要用到对象写法。

  1. <template>
  2.   <div class="home">
  3.     <h2>首页</h2>
  4.     <button @click="add">加</button>
  5.     <button @click="subtract">减</button>
  6.     <h2>{{ count }}</h2>
  7.     <p>双倍{{ doublecount }}</p>
  8.     <p>加100 {{ testcount }}</p>
  9.   </div>
  10. </template>
  11. <script>
  12. import { computed } from "vue";
  13. // this.$router  用来跳转路由  this.$router.push()  this.$router.replace
  14. // this.$route  用来获取路由参数 this.$route.query
  15. export default {
  16.   name: "HomeViem",
  17.   data() {
  18.     return {
  19.       // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
  20.       count: 1,
  21.     };
  22.   },
  23.   methods: {
  24.     add() {
  25.       this.count++;
  26.     },
  27.     subtract() {
  28.       this.count--;
  29.     },
  30.   },
  31.   watch: {
  32.     // 监听路由的跳转或者响应式数据的变化
  33.     // 没有返回结果，只是监听， 做实时搜索可以用
  34.     //函数写法
  35.     // count: (newv, oldv) => {
  36.     //   console.log(newv, oldv);
  37.     //   console.log(newv + oldv);
  38.     // },
  39.     $route: (newv, oldv) => {
  40.       console.log(newv, oldv);
  41.     },
  42.     //   对象写法
  43.     count: {
  44.       handler(newv, oldv) {
  45.         console.log(newv, oldv);
  46.         console.log(newv + oldv);
  47.       },
  48.       immediate: true, //首次立即执行
  49.       deep: true, //深度监听，主要针对对象，数组这种复杂的数据
  50.     },
  51.   },
  52. };
  53. </script>

6.this.$router和this.$route

this.$router  用来跳转路由  eg： this.$router.push()  this.$router.replace

this.$route  用来获取路由参数 eg： this.$route.query

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/830513?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号