delete和Vue.delete(this.$delete)的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 此行代码要接触注释引入vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script>
// 删除数组
// delete:只是把数组元素的值变成empty或undefined，元素的键不变，数组长度不变
// Vue.$delete:直接删除数组中的元素，改变数组的键值和长度
// 删除对象
// 两者相同，都会把键名（键名/字段）和键值删除
// 共同点：两者都不能删除变量
</script>
<Script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
object: {
name: "xiaoming",
age: 24,
gender: "man",
},
array: [1, 2, 3, 4, 5]
},
mounted() {
delete this.object.age
console.log(this.object,"11111111111111111") //{name:"xiaoming",gender:"man"} //此处不知道为什么会被this.$delete()的代码影响 对象只剩下{gender:"man"}
// this.$delete(this.object, "name")
// console.log(this.object,"22222222222222222") //{gender:"man"}
let that = this
setTimeout(function(){
that.$delete(that.object, "name")
console.log(that.object,"22222222222222222")
},1000)
//计时器延时后，还是会影响上面的代码
delete this.array[3]
console.log(this.array,"333333333333333333") //[1, 2, 3, empty, 5]
console.log(this.array.length) //5
this.$delete(this.array, 0)
console.log(this.array,"444444444444444444") //[2, 3, empty, 5]
}
})
</Script>
</body>
</html>
