vue开发技巧总结

数组更新检测

触发视图更新:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除:

• Vue.set(object, key, value) 方法
• 替换旧对象

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
例如：

this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })

表单修饰符

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

filter

filter中获取不到this
解决方法：

var vm = new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data){
              return vm.content;
          }
    },
    ...
});

<template>
    <div>{{ content | reverseStr(content) }}</div>
</template>

new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data, content){
              return content;
          }
    },
    ...
});

监听子组件的生命周期函数

@hook可以监听到子组件的生命周期钩子函数(created,updated等等).
例如:@hook:mounted="doSomething"

<template>
  <Child v-bind="$props" v-on="$listeners" @hook:mounted="doSomething"> </Child>
</template>
 
<script>
  import Child from "./Child";
  export default {
    props: {
      title: {
        required: true,
        type: String
      }
    }
    components: {
      Child
    },
    methods: {
      doSomething(){
        console.log("child component has mounted!");
      }
    }
  };
</script>

函数式组件

函数式组件, 无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。

子组件：

<template functional>
  <div>
    <p v-for="(name, idx) in props.users" @click="props.clickHandler(name)" :key="idx">
      {{ name }}
    </p>
  </div>
</template>

父组件：

<template>
  <div>
    <UserList :users="users" :click-handler="clickHandler.bind(this)"></UserList>
  </div>
</template>
 
<script>
import UserList from "./UserList";
 
export default {
  name: "App",
  data: () => {
    users: ['james', 'ian']
  }
  components: { UserList },
  methods: {
    clickHandler(name){
      console.log(`clicked: ${name}`);
    }    
  }
};
</script>

CSS Modules

第一步：CSS Modules 必须通过向css-loader传入modules: true来开启
第二步：在<style>上添加module特性

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

绑定内联样式

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
或
data: {
  activeColor: 'red',
  fontSize: 30
}