小编Zhe*_*Bai的帖子

如https://www.chromestatus.com/features/6750456638341120中所述,这两个穿孔阴影的组合器已经被弃用了.
那么实现同样的东西是什么,或者这个阴影穿透功能已被完全抛弃了？

我问这个问题是为了确认我对某些概念的理解。

React 文档强调包含 useEffect() 回调中使用的所有依赖项。正如文档中所解释的：

否则，您的代码将引用先前渲染中的陈旧值。

我有点明白这个解释是从哪里来的。但我关心的是“陈旧价值”部分。我没有看到由于缺少依赖项而导致过时值发生任何可能的方式。我的论点也得到了文档中内容的支持：

经验丰富的 JavaScript 开发人员可能会注意到，传递给 useEffect 的函数在每次渲染时都会有所不同。这是故意的。事实上，这让我们可以从效果内部读取计数值，而不必担心它会过时。

据我的理解，如果我们错过列出依赖项，则该效果将不会在该依赖项更改引起的渲染后运行，因为 React 认为效果不依赖于它。如果我猜测，可能是文档提到引用过时数据时的情况。事实上，效果代码中的数据已经过时。但是，效果回调一开始并不运行。在效果运行之前我不会注意到数据已过时。如果这很重要，我将首先找出效果未运行的原因并解决问题。我感到困惑的不是数据过时，而是效果无法运行。

此外，我们假设效果在由另一个依赖项更改引起的渲染之后运行。在这种情况下，即使我们错过了依赖项，由于上述关闭原因，我们也不会读取过时的数据。我做了一些实验来证实这一点：

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(10);

  useEffect(() => {
    console.log(count2);
  }, [count1]);
  
  return (
    <div className="App">
      <div>
        Count1: {count1}
        <button onClick={() => setCount1(count1 + 1)}>increase</button>
      </div>
      <div>
        Count2: {count2}
        <button onClick={() => setCount2(count2 + 1)}>increase</button>
      </div>
    </div>
  );
}

只要效果运行，我们总是会得到最新的 count2。那么我的理解成立吗？

我想知道为什么 React 如此推荐包含所有依赖项。人们通常使用依赖数组来绕过某些运行效果。如果他们省略了依赖项，这可能就是他们想要的。如果是失误，他们很容易注意到效果没有运行并采取行动。

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

在OpenUI5 demokit 的1.5.2.3定义绑定路径部分中:

在聚合绑定的情况下,对于聚合的每个条目都存在上下文,或者可以使用setBindingContext方法为控件显式设置上下文.

在OpenUI5 demokit的1.5.3.3元素绑定部分中:

元素绑定允许将元素绑定到模型数据中的特定对象,这将创建绑定上下文并允许控件及其所有子元素之间的相对绑定.

在我看来,这两种技术实际上做同样的事情.它们都为控件创建绑定上下文,以便包含控件的绑定将相对于它进行解析.但它们之间的区别是什么？在什么情况下他们中的任何一个会发挥作用？

该setBindingContext不会在下面的代码工作:
https://jsbin.com/bigope/edit?html,output
但是,如果我改变oPanel.setBindingContext("/ nameinfo"); to oPanel.bindElement("/ nameinfo"); ,它有效,为什么？

我是vuejs的新手。在我看来，track-by属性有点难以理解。下面的示例显示track-by属性与数组中的重复元素有关，但是v-for属性如何在后台实现？当数组中有重复的元素时，行为是什么？track-by =“ $ index”如何产生影响？

new Vue({

	el: '#app',
  
  data: function() {
  	return {
    	items: [
      	'User Connected',
        'Message',
        'Message',
        'User Connected',
        'Message'
      ]
    }
  },
  
  methods: {
  	addItem: function(item) {
			this.items.push(item);
    }
  }

})

<div id="app">
  <button @click="addItem('User Connected')">Add Connected</button>
  <button @click="addItem('Message')">Add Message</button>

  <ul>
    <li v-for="item in items" track-by="$index">{{ item }}</li>
  </ul>
  <pre>
    {{items | json}}
  </pre>
</div>

https://jsfiddle.net/uuw4z0kr/2/

将数据分组到嵌套对象属性中很方便。通过这样做，我们不必将数据字段中的属性收集到实体中以供以后使用。如下例所示，

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="demo">
  <div class="person">
    <h3>{{ level1.level2.level3_1 }}</h3>
    <p>{{ level1.level2.level3_2 }}</p>
  </div>
</div>

然而，必须输入“level1.level2”前缀才能到达 level3_x 字段，这确实有点过分了。如果有大量的level3字段，那就很麻烦了。

我想知道是否有什么方法可以节省一遍又一遍地输入 level1.level2 的工作。模板是否具有任何语法，以便某些部分位于“level1.level2”的范围内？Vue 是否提供任何支持，以便在这种情况下假定前缀“level1.level2”？