VUE项目性能优化,v-if,v-for,props,computed,watch......

VUE项目性能优化,v-if,v-for,props,computed,watch…

下个星期就要用vue开发了,就未雨绸缪的搜集了一些干货,整理出来

1:解决v-for和v-if优先级问题,以及通过计算属性来做数据筛选

<template v-for="item in 10">
    <div v-if="item % 2 == 0" :key="item">{{item}}</div>
</template>

<ul>
  <li
    v-for="goodsList"
    :key="user.id">
    {{ item.name }}
  </li>
</ul>


computed: {
  goodsList: function () {
    return this.users.filter(function (val) {
 		return val.isActive
    })
  }
}

2:props的修改

<child :name.sync="name"></child>//父组件的子组件标签添加.sync修饰符

//子组件
export defalut {
    props: {
        name: String  
    },
    methods: {
        changeTitle(){
            this.$emit('update:name', 'hello')//可以触发 update:属性名 来更新prop
        }
    }
}

3:路由懒加载

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

4:样式穿透,一般在引入第三方组件的时候,用来修改样式

<style scoped>
外层 >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

5:新增的数据不响应

<template>
  <div>
    <div>
      <span>用户名: {{ userInfo.name }}</span>
      <span>用户性别:{{ userInfo.sex }}</span>
      <span>用户年龄:{{ userInfo.age }}</span>
    </div>
    <button @click="addAge">添加年龄</button>
  </div>
</template>ht

<script>
	export default {
  		data() {
    		return {
      			userInfo: {
        			name: '赫',
        			sex: '男'
      				}
    			}
  },
  methods: {
    // 在这里添加用户的年龄
    	addAge() {
      		this.userInfo.age = '25'//视图不会更新
    		}
  }
}
</script>

解决办法

//1
data() {
    return {
      userInfo: {
        name: '赫',
        sex: '男',
        // 我先提前定义好
        age: '',//提前定义好
      }
    }
  }
  
//2
addAge() {
  Vue.set(this.userInfo,'age', '25')//使用vue.set()
}
//3
数组变异只针对数组push pop shift unshift splice sort reverse

未完待续…