zoukankan      html  css  js  c++  java
  • vue 总结

    1.计算属性(computed)和侦听属性(watch)的区别

    computed官方文档:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

    这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    watch官方文档:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    watch监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作

    2.watch的深度监听

    radio1:{ //监听的元素
          handler(newVal,oldVal){
            // 需要执行的操作
        },
        immediate: true, 
        deep: true,
      },
    //监听销毁函数
    unWatch(){
           app.$watch('radio1',(newVal,oldVal)=>{
             console.log(`${newVal}:${oldVal}`);
           })
        }

    3.过滤器(filter)

    过滤器就是数据经过处理之后转换为你想要的数据格式。比如给数据添加装饰,转换为相对应的文字显示等等

    3.v-show和v-if的区别

    v-show 只是简单的控制元素的 display 属性,有更高的首次渲染开销;v-show 切换开销小;适用于频繁切换的元素。

    v-if 是条件渲染,是惰性的。条件为真,元素将会被渲染,条件为假,元素会被销毁;首次渲染开销要小的多;更高的切换开销;可以搭配 template 使用。

    4.类的动态加载

    //数组语法:
        :class="[
          fontTheme,
          darkMode ? 'dark-theme' : 'light-theme',
        ]"
    //对象语法:
       :class="{
          'dark-theme': darkMode,
          'light-theme': !darkMode,
        ]
     //计算属性:
    computed: {
        class() {
          return darkMode ? 'dark-theme' : 'light-theme';
        }
      }
    :class="class"
    //三目运算符:
     :class="darkMode ? 'dark-theme' : 'light-theme'"

    5.static和assert在编译时的区别

    static中的文件不会经过编译,打包后生成dist文件夹。static文件只是复制了一遍,
    static中建议放一些外部的第三方文件,assets文件经过webpack打包,重新编译。

    6.& 

    伪选择器与混合一起使用,&标识当前选择器的父类

  • 相关阅读:
    Leetcode Binary Tree Preorder Traversal
    Leetcode Minimum Depth of Binary Tree
    Leetcode 148. Sort List
    Leetcode 61. Rotate List
    Leetcode 86. Partition List
    Leetcode 21. Merge Two Sorted Lists
    Leetcode 143. Reorder List
    J2EE项目应用开发过程中的易错点
    JNDI初认识
    奔腾的代码
  • 原文地址:https://www.cnblogs.com/cuipingzhao/p/15419270.html
Copyright © 2011-2022 走看看