Vue开发注意点

最新推荐文章于 2021-12-02 15:23:23 发布

where_slr

最新推荐文章于 2021-12-02 15:23:23 发布

阅读量296

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记日常心得注意点文章标签： vue

本文链接：https://blog.youkuaiyun.com/where_slr/article/details/87883155

学习笔记同时被 2 个专栏收录

44 篇文章

订阅专栏

日常心得注意点

15 篇文章

订阅专栏

本文深入探讨Vue.js的高级用法，包括路由绑定点击事件、数组对象深拷贝避免引用问题、动态class应用技巧、数组与对象响应式监测限制、父组件监听子组件原生事件及props属性详解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、给路由绑定点击事件

 <a href="javascript:;" @click="linkToServiceAgreement()" class="link_service_agreement">链接</a>
 methods：{
	linkToServiceAgreement() {
	        /* 跳到链接 */
	         this.$router.push({
	          path:"/serviceAgreement",
	         });
	        }
}

2、vue 数组对象赋值时，修改A数组，B数组一起被修改

new Vue({
	data: {
		arr1: [],
		arr2: []
	},
	ready: function() {
		// 这里是将arr2参数的值赋给arr1
		this.arr1= this.arr2;
	}
});

这样赋值确实是没有问题，arr2的值确实是赋值给了arr1，但是神奇的地方就是，如果你在后续的操作里面，修改arr1的值，你会发现，arr2的值也跟着修改了，就好像arr1和arr2这两个参数绑在了一起，只要有一个修改的，另一个就会修改；
这是由于vue的赋值是利用浅拷贝，这样的赋值会使这两个参数指向同一地址；

new Vue({
	data: {
		arr1: [],
		arr2: []
	},
	ready: function() {
		// 这里是将arr2参数的值赋给arr1,这样两个数组就独立互不影响
		this.arr1= JSON.parse(JSON.stringify(this.arr2));//深拷贝
	}
});

3、动态class时,注意多种情况

第一种，正确
<div :class="{ active:tab == 1 }">
</div>

第二种，正确
<div :class=" tab == 1?'active':'' ">
</div>

第三种，错误
<div :class="{ tab == 1?'active':'' }">
</div>

4、(1)Vue不能监测到数组长度的变化和利用数组索引改变值，这两个操作不会触发视图更新：

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

(2)Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性：

var vm = new Vue({
  data: {
    a: 1,
    obj:{
    	name:'A'
    }
  }
})
// `vm.a` 现在是响应式的

vm.b = 2;
// `vm.b` 不是响应式的
vm.obj.age=22; 
//obj.age 对象属性的添加，不是响应式

以下两种方式都可以实现和vm.items[index]=newValue相同的效果，同时也将触发状态更新;

// Vue.set
Vue.set(example1.items, index, newValue)
// Array.prototype.splice

arr.items.splice(index, 1, newValue)；
//arr = [];数组清空
//arr.splice(0);

vm.$set(vm.obj,'age',22);

5、父组件监听原生事件，事件加上.native,
$event可以获取子组件传来的参数

<u-button button-name="上一步" button-color="#dddddd" 
                        @click.native = "a++" @handle-click="$event">
                </u-button>

6、props属性type、default（可以自定义验证函数）、required（声明这个参数是否必须传入）、validator（自定义验证函数）

props: {
  // 带有默认值的对象
  title:{
      type: String,
       // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }，
      required: true,//必须传入
    },
  // 自定义验证函数
  author:{
  	type:String,
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['au', 'th', 'or'].indexOf(value) !== -1
     },
     default:'jj'
    }
}

watch监听路由变化:

watch:{
        '$route'(to,from) {   
            console.log(to,from);
        }
    }

注意：watch监听路由仅局限与有子路由的情况下，兄弟路由间是监听不到的！！！！！！
兄弟间路由监听无效