Vue学习2_python_内存溢出

key作用域与原理

react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题：

若对数据进行逆序添加、逆序删除等破坏顺序 *** 作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份z号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序的 *** 作，仅用于渲染列表，使用index作为key是没有问题的

<!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>key的原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="add">添加老刘</button>
        <ul>
            <!-- key给节点设置一个标识 -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}} ---- {{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            persons: [
                { id: '001', name: '张三', age: 18 },
                { id: '002', name: '李四', age: 19 },
                { id: '003', name: '王五', age: 20 }
            ]
        },
        methods: {
            add() {
                const p = { id: '004', name: '老刘', age: 40 }
                this.persons.unshift(p);//在数组开头中添加一个或多个元素
            }
        }
    })
</script>

</html>

列表过滤

模糊搜索
1.原数据不能直接修改，也就是不能写this.person=this.person.filter(…)
一开始什么也没有输入，就改变了一次
任何字符串都包含空串，也就是删除之后，所有的数据就都出来了

<!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>key的原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入文字查询" v-model="keywords">
        <ul>
            <!-- key给节点设置一个标识 -->
            <li v-for="(p,index) in fulpersons" :key="index">
                {{p.name}} ---- {{p.age}}

            </li>
        </ul>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //watch实现
    // #region


    /* 
    new Vue({
  
          el: "#root",
          data: {
              keywords: "",
              persons: [
                  { id: '001', name: '马冬梅', age: 19, sex: '女' },
                  { id: '002', name: '周冬雨', age: 20, sex: '女' },
                  { id: '003', name: '周杰伦', age: 21, sex: '男' },
                  { id: '004', name: '温兆伦', age: 22, sex: '男' }
  
              ],
              fulpersons: [],
          },
          watch: {
              keywords: {
                  immediate: true,
                  handler(newValue) {
                      this.fulpersons = this.persons.filter((p) => {
                          return p.name.indexOf(newValue) != -1;
                          //indexOf会返回所匹配的字符串在查询字符串中的下标位置，-1代表不匹配
                      })
                  }
              }
          }
  
      })*/
    //#endregion

    new Vue({

        el: "#root",
        data: {
            keywords: "",
            persons: [
                { id: '001', name: '马冬梅', age: 19, sex: '女' },
                { id: '002', name: '周冬雨', age: 20, sex: '女' },
                { id: '003', name: '周杰伦', age: 21, sex: '男' },
                { id: '004', name: '温兆伦', age: 22, sex: '男' }

            ],

        },
        computed:{
            fulpersons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keywords) !== -1
						})
					}
				}

        })
</script>

</html>

列表排序

关于sort函数的用法

<!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>key的原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入文字查询" v-model="keywords">
        <button @click="SortType=0">原年龄</button>
        <button @click="SortType=1">年龄升序</button>
        <button @click="SortType=2">年龄降序</button>
        <ul>
            <!-- key给节点设置一个标识 -->
            <li v-for="(p,index) in fulpersons" :key="p.id">
                {{p.name}} ---- {{p.age}}---{{p.sex}}

            </li>
        </ul>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;


    new Vue({

        el: "#root",
        data: {
            SortType: "0",//0代表原顺序,1代表升序，2代表降序
            keywords: "",
            persons: [
                { id: '001', name: '马冬梅', age: 19, sex: '女' },
                { id: '002', name: '周冬雨', age: 30, sex: '女' },
                { id: '003', name: '周杰伦', age: 5, sex: '男' },
                { id: '004', name: '温兆伦', age: 22, sex: '男' }

            ],

        },
        computed: {
            fulpersons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keywords) !== -1
                })
                //sorttype不论是1还是2，布尔值都是1
                if (this.SortType) {
                    //关于sort函数排序（sort是改变原数组的）
                    return arr.sort((p1, p2) => {
                        return this.SortType === 1 ? p1.age - p2.age : p2.age - p1.age;
                    })
                }
                return arr;
            }
        }

    })
</script>

</html>

更新时的问题

1.拿到data，进行加工，才变成_data(加工之后就可以进行响应式了)
2.set能影响页面
vm._data.student.sex=“男”

Vue.set()API中三个参数,可以设置响应式的数据
target，要追加属性的目标名称
key,追加的属性的名称
val，value

Vue.set(vm._data.student,“sex”,“男”)
或者
Vue.$set(vm._data.student,“sex”,“男”)
这样设置之后就是响应式的了
vm._data.student===vm.student（数据代理，换成这个也行）
vm和vm.data都不能作为target

<!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>监测原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <button @click="addSex">添加一个性别属性</button><br>
        <h2 v-if="student.sex">性别是：{{student.sex}}</h2>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: "df",
            student: {
                age: 19,

            }
        },
        methods: {
            addSex() {
                // this.set(this.student, 'sex', '男');
                this.$set(this.student, 'sex', '男');
            }
        }

    })
</script>

</html>

Vue监视数据总结

判断新添加的元素是否是响应式（有get/set）

<!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>key的原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">


        <h1>student information</h1>
        <button @click="student.age++">age++</button>
        <button @click="addSex">add sex attribute defaultvalue man</button>
        <button @click="student.sex='未知'">update sex</button>
        <button @click="addFriend">add a friend at head</button>
        <button @click="updateFirstFriend">update firstfriend name:zhangsan</button><br><br>
        <button @click="addHobby">add a hobby</button>
        <button @click="updatehobby">update a hobby:drive</button>
<button @click="removeSmoke">过滤掉爱好中的抽烟</button>


        <h3>姓名:{{student.name}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-if="student.sex">性别:{{student.sex}}</h3>
        <h3>爱好:</h3>


        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">

                {{h}}
            </li>
        </ul>

        <h3>朋友们:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">

                {{f.name}}---{{f.age}}
            </li>
        </ul>



    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {


            student: {
                name: 'qut',
                age: 18,
                hobby: [
                    'smoke', 'wine', 'fair'
                ],
                friends: [
                    { name: 'jerry', age: 35 },
                    { name: 'tony', age: 36 }
                ],
            }
        },
        methods: {
            addSex() {
                // Vue.set(vm.student,"sex","男");//√
                // Vue.set(this.student,"sex","男");//√
                // Vue.$set(this.student,"sex","男");//错误
                this.$set(this.student, "sex", "男");
            },
            addFriend() {
                this.student.friends.unshift({ name: "liu", age: 50 });//能做响应式吗？痛殴控制台验证（有get/set就行s）
            },
            updateFirstFriend() {
                this.student.friends[0].name = "qut";
                this.student.friends[0].age = "99";
            },
            addHobby() {
                this.student.hobby.push("study");
            },
            updatehobby() {
                // this.student.hobby[0]="drive";//Vue不认
                //把[0,1),也就是第一个删掉，然后更改为hobby
                // this.student.hobby.splice(0,1,"drive");
                this.$set(this.student.hobby, 0, '开车');
            },
            removeSmoke(){
               /* filter不能引起原数组的改变，所以Vue检测不到
                this.student.hobby.filter((h)=>{
                    return h!=='smoke';
                })
                更改之后就可以改变了
                */
                this.student.hobby=this.student.hobby.filter((h)=>{
                    return h!=='smoke';
                })

            }
        }


    })
</script>

</html>

收集表单数据

<!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>key的原理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!-- 阻止跳转这个默认行为 -->
        <form   @submit.prevent="subDemo">

            <!-- 文字也获取焦点 -->
            <label for="demo">账号: </label>
            <!-- trim去掉首尾空格 -->
            <input type="text" id="demo" v-model.trim="userinfo.account"><br>
            密码: <input type="password" v-model="userinfo.password"><br>
            <!-- 只能输入数字 -->
            年龄: <input type="number" v-model.number="userinfo.age">

            性别:
            <!-- 把那么name都写成sex,就是单选按钮 -->
            男：<input type="radio" name="sex" v-model="userinfo.sex" value="man">
            女: <input type="radio" name="sex" v-model="userinfo.sex" value="woman"><br><br>
            爱好：
            学习<input type="checkbox" v-model="userinfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userinfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat">
            <br /><br />
            所属校区：
            <select v-model="userinfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br /><br />
            其他信息：
            <!--加上lazy就不会时时刻刻收集，提交的时候收集 -->
            <textarea v-model.lazy="userinfo.other"></textarea> <br /><br />
            <input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>


        </form>



    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {

            userinfo: {
                account: '',
                age: 0,
                password: '',
                sex: "female",//这个地方写的就是默认值
                // hobby:"",hobby的初始值影响它对数据的收集
                hobby: [],
                city: 'beijing',
                other: '',
                agree: ''//这个地方要的就是是否勾选
     
            }
        },
        methods: {
            subDemo(){
                console.log(JSON.stringify(this.userInfo));

            }
        }


    })
</script>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/742666.html

Vue学习2

发表评论

评论列表（0条）