VUE数据绑定与取消数据绑定

吴愈进

前言：现在做前端不会一些JS前沿框架，还真不好意思说自己是做前端的，我现在的公司也已经开始用VUE来做项目了，我做vue开发快两年了，是我司最早一个使用VUE开发项目了，当前也一直停留在VUE使用阶段。

解释：这篇文章是我个人的一些总结和记录。

VUE的官方文档写的很好，还是中文文档，对于我们这些英文水平不行的帮大忙了，

一、VUE数据绑定

1、表单数据绑定。（下面列子）

<script>
    data(){
        return {
             message:""
</script>
<input v-model="message" placeholder="">
<p>Message is: {{ message }}</p>

这样当我们input value的值发生改变时message值也同事发生了改变。

2、网络请求数据绑定。（下面列子）

<script>
    data(){
        return {
              // 数据集合
             list:[]
    methods: {
        async getHttp() {
            // http请求
            const res = await fetch('http://www.qingqiu.com').then((res)=>res.json())
            this.list = res.rs
</script>
<div class="content-list">
    <li class="list" v-for="item in list" :key="item.id">{{item.text}}</list>
<div>

当请求数据返回成功后返回数据，赋值给list后页面会自动渲染数据。

3、简单说说数据绑定思路。

在JS Object中有个属性叫defineProperty，这个属性可以用来监听对象中指定key值的变化。

let obj = {
    name: "张三",
    age: 18
Object.defineProperty(obj, 'name', {
   get: function () {
      console.log('将要读取obj.name属性');
   set: function (value) {
        console.log('当前修改的值：', value);
obj.name;  // 将要读取obj.name属性
obj.age;   // 不会触发get
obj.name  = "李四";  // 当前修改的值：李四
obj.age = 22;   // 不会触发set

这时我们就可以通过get/set对数据进行处理，这便是一个简单的数据绑定。

当然Object.defineProperty(obj, prop, descriptor)，第三个参数还有许多配置

二、VUE数据解除绑定

1、当我们在使用vue赋值的时候会出现这种场景。

<script>
    data(){
        return {
              // 数据集合
             list:[1,2,3,4,5]
   created() {
      let data = this.list
      // 删除数组中的第一位
      data.splice(0,1)
</script>
结果：data  // [2,3,4,5]
结果：this.list // [2,3,4,5]

结果this.list中的数据也发生了改变，窝草............，改成这样。

<script>
    data(){
        return {
              // 数据集合
             list:[1,2,3,4,5]
   created() {
      let data = [...this.list]