目录

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对象中。

    
      
首页
      加
      减
      
{{ count }}
    
  
  
  export default {
    name: "HomeViem",
    data() {
      return {
        // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
        count: 1,
      };
    },
    methods: {
      add() {
        this.count++;
      },
      subtract() {
        this.count--;
      },
    },
  };
  

需要注意的是如果页面中并不需要响应式数据就可以不写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。

    
        
{{num}}
        ++
        +5
    
    
 
    
    
        new Vue({
            el: '#app',
            // 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。
            data: {
                num: 0
            },
            // methods方法
            methods: {
                add: function (e) {
                    // 事件对象
                    console.log(e);
                    console.log(this);
                    this.num++
                },
                add5(n, e) {
                    console.log(e);
                    this.num += n;
                }
            }
        })
    
 

5.计算属性和watch 

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

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

  
    
首页
    加
    减
    
{{ count }}
    
双倍{{ doublecount }}
    
加100 {{ testcount }}
  


import { computed } from "vue";
// this.$router  用来跳转路由  this.$router.push()  this.$router.replace
// this.$route  用来获取路由参数 this.$route.query
export default {
  name: "HomeViem",
  data() {
    return {
      // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
      count: 1,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    subtract() {
      this.count--;
    },
  },
  computed: {
    // 使用场景：购物车计算商品总价
    // 根据响应式数据的变化自动计算结果。
    //   计算属性必须返回一个结果
    doublecount() {
      return this.count * 3;
    },
    testcount() {
      return this.count + 100;
    },
  },
};

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

  
    
首页
    加
    减
    
{{ count }}
    
双倍{{ doublecount }}
    
加100 {{ testcount }}
  


import { computed } from "vue";
// this.$router  用来跳转路由  this.$router.push()  this.$router.replace
// this.$route  用来获取路由参数 this.$route.query
export default {
  name: "HomeViem",
  data() {
    return {
      // 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。
      count: 1,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    subtract() {
      this.count--;
    },
  },
  watch: {
    // 监听路由的跳转或者响应式数据的变化
    // 没有返回结果，只是监听， 做实时搜索可以用
    //函数写法
    // count: (newv, oldv) => {
    //   console.log(newv, oldv);
    //   console.log(newv + oldv);
    // },
    $route: (newv, oldv) => {
      console.log(newv, oldv);
    },
    //   对象写法
    count: {
      handler(newv, oldv) {
        console.log(newv, oldv);
        console.log(newv + oldv);
      },
      immediate: true, //首次立即执行
      deep: true, //深度监听，主要针对对象，数组这种复杂的数据
    },
  },
};

6.this.$router和this.$route

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

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