vue基础知识总结（二）

关注

原创最新推荐文章于 2026-03-02 06:11:06 发布 328 阅读 AI 写同款· GEO 优化 ›

VUE -- 基础知识讲解（二）本文系统介绍了Vue.js核心概念，包括虚拟DOM、diff算法、Vue3新特性和关键技术。虚拟DOM通过JavaScript对象描述视图结构，减少直接DOM操作提升性能；diff算法采用同层比较策略高效更新DOM。Vue3新增了Composition API、Teleport等特性，优化了响应式系统和编译器。文章还详解了动态路由、key的作用、nextTick原理，以及watch和computed的异同，帮助开发者深入理解Vue工作原理和最佳实践。阅读详情

ref属性

表示对dom的引用，值可以随便取，但不能重复
通过 this.$refs.值 来获取
ref=”inputRefId”(设置) this.$refs.inputRefId(获取)

全局自定义指令Vue.directive()

两个参数，1 指令名字(如果名字有大写字母,使用时需要用-分割)，2 对象(表示自定义配置项)
使用时需要以 v-开头加上指令名字
配置项中有 inserted(el,bindng)钩子函数(自定义指令插入标签中执行)，el表示使用自定义指令的元素，binding表示自定义指令的信息(binding.value可以获取自定义指令属性的值，binding.expression表示自定义指令属性的表达式)

创建全局过滤器Vue.filter()

两个参数，1 过滤器名字, 2 过滤器处理函数(第一个参数永远为过滤的数据)

// 在需要过滤的数据后面加上管道符 | 过滤器名称 
 {{new Date() | fmtTime('/')}}

Vue.filter('fmtTime', function(time, seprator) {
    console.log(time);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    return y + seprator + m + seprator + d
  })

computed计算属性

创建计算属性通过computed关键字，是一个对象（在其内部定义计算属性，他是一个函数，可以当属性来使用）
计算属性是基于他们的依赖进行缓存的(如果不改变就使用其缓存数据)

<div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName"
      <div>全名：{{fullName}}</div>
    </div>
    <script>
      // 计算属性是根据data中已有的属性，计算得到一个新的属性
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: ''
        },
        // 创建计算属性通过computed关键字，它是一个对象
        // 计算属性是基于它们的依赖进行缓存的
        computed: {
          // 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
          fullName () {
            return this.firstName + this.lastName
          }
        }
      })

watch监听器

watch是一个对象，用来监听data中数据的值，只要监听的数据一变化，就执行相应的函数
需要监听的数据，就是函数的名字，有两个参数，newval,oldval。

<div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <div>全名：{{watchFullName}}</div>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: '',
          watchFullName: ''
        },
        // watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
        // 创建监听器通过watch属性，它是一个对象
        watch: {
          // 这里面的函数名很特殊，它是你需要监听的data的名字，这个函数包含两个参数，一个是newVal,一个是oldVal
          firstName (newVal, oldVal) {
            this.watchFullName = newVal + this.lastName
          },
          lastName (newVal, oldVal) {
            this.watchFullName = this.firstName + newVal
          }
        }
      })

开发时能用computed实现就用computed
需要执行异步操作时用watch

深度监听(监听对象)

需要监听的数据，是对象的名，其中有一个handler函数，和一个deep=true

watch: {
          user: { //user 为监听数据名字
            // hanlder这个函数名字固定
            handler (newval，oldval) {
            // 注意这两个参数都为改变后的数据
            },
            // deep:true表示深度监听
            deep: true
          }
        }

axios

axios发送get请求

axios.get('http://157.122.54.189:9093/api/getprodlist')
.then(res => {
  console.log(res);
// axios中将数据封装到了data属性中
  console.log(res.data);
 })
.catch(error => {
    console.log(error);
})

axios发送post请求

axios.post('http://157.122.54.189:9093/api/addproduct', {
  // 传递的参数
})
.then(res => {
    console.log(res.data);
})
.catch(error => {
    console.log(error);
})

过渡和动画

css类名

找到需要过度的元素，用transition包裹起来，给transition标签添加name属性，这个name属性将会作为类名的前缀
定义类名分为两组(入场动画，离场动画)
- 入场动画 v-enter, v-enter-active, v-enter-to
- 离场动画 v-leave-to, v-leave-active, v-leave